组件双向数据绑定 v-model

你的名字 2022-10-29 05:21 182阅读 0赞

通过v-model控制模态框的显示隐藏

示例：

<template>
      <a-modal
        title=""
        :centered="true"
        :visible.sync="visible"
        :mask="false"
        :footer="null"
        :width="width"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <div class="modal-tips">
          <div><i class="iconfont iconStyle" :class="icon" /></div>
          <div class="text">{
       { text }}</div>
        </div>
      </a-modal>
    </template>
    
    <script>
    export default {
      name: 'Index',
      props: {
        value: {
          type: Boolean,
          default: false
        },
        text: {
          type: String,
          default: ''
        },
        width: {
          type: [String, Number],
          default: 300
        },
        icon: {
          type: String,
          default: 'iconbiaojiwancheng'
        }
      },
      computed: {
        visible: {
          get() {
            return this.value
          },
          set(value) {
            if (this.value !== value) {
              this.$emit('input', value)
            }
          }
        }
      },
      methods: {
        handleOk() {
          this.handleCancel = false
        },
        handleCancel() {
          this.visible = false
        }
      }
    }
    </script>
    
    <style scoped lang="less">
    .modal-tips {
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .iconStyle {
        font-size: 46px;
        color: #1ac476;
      }
      .text {
        font-size: 13px;
        font-weight: 500;
        color: #1f2329;
        margin-top: 10px;
      }
    }
    </style>

使用：

<Tips v-model="showTips" :text="tips" />

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue数据双向绑定

5.Vue数据双向绑定 5.1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

刺骨的言语ヽ痛彻心扉/ 2024年03月30日 09:50/ 0 赞/ 147 阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 181 阅读

相关组件的双向绑定

以下会在input、checkbox、select、div组件上分别实现双向绑定： input 在input组件上绑定v-model指令，实现双向绑定：实现思路：

小咪咪/ 2023年06月27日 03:48/ 0 赞/ 18 阅读

相关父组件和子组件实现双向绑定

父组件和子组件的双向绑定是在写组件经常遇到的事了方法1：通过wacth监听子组件的绑定的值更新过的值，再更新的父组件 1，父组件传值到子组件的例：父组件

旧城等待，/ 2022年11月13日 14:27/ 0 赞/ 200 阅读

相关组件双向数据绑定 v-model

通过v-model控制模态框的显示隐藏示例： <template> <a-modal title="" :center

你的名字/ 2022年10月29日 05:21/ 0 赞/ 183 阅读

相关 v html是双向绑定吗,v-model 数据双向绑定

v-model 数据双向绑定 v-model只能在表单元素中使用 Document v-bind绑定 v-model绑定 var vm = new Vue(\{ e

港控/mmm°/ 2022年10月12日 00:53/ 0 赞/ 234 阅读

相关 js双向绑定数据

转自：http://www.jb51.net/article/107917.htm 前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-

深碍√TFBOYSˉ_/ 2022年05月24日 00:56/ 0 赞/ 266 阅读

相关 vue父子组件数据双向绑定

1，父组件 <certificate-input :p_model.sync='pname'></certificate-input> 将父组件的值pname传入到

清疚/ 2022年04月12日 11:40/ 0 赞/ 289 阅读

相关 react数据双向绑定

1，page页面 import React, { PureComponent } from 'react'; import { findDOMNode } f

待我称王封你为后i/ 2022年04月04日 12:38/ 0 赞/ 334 阅读

相关 React双向数据绑定

React双向数据绑定前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。什么是双向数据绑定？ PS：m

今天药忘吃喽~/ 2021年09月29日 02:48/ 0 赞/ 453 阅读