vue如何实现v-model

发布时间:2023-01-06 17:34:00 作者:iii
来源:亿速云 阅读:81

本文小编为大家详细介绍“vue如何实现v-model”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如何实现v-model”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

v-model主要提供了两个功能,view层输入值影响data的属性值,data属性值发生改变会更新view层的数值变化。

其核心就是,一方面modal层通过defineProperty来劫持每个属性,一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件,为控件的v-model绑定input事件,从而页面输入能实时更新相关data属性值。

vue2.0实现方法

<template>
 <div id="app">
   {{username}} <br/>
   <my-input type="text" v-model="username"></my-input>
 </div>
</template>

<script>
import myinput from './components/myinput'
export default {
 name: 'App',
 components:{
     myinput
 },
 data(){
   return {
     username:''
   }
 }

}
</script>
<template>
   <div class="my-input">
       <input type="text" class="my-input__inner" @input="handleInput"/>
   </div>
</template>

<script>
   export default {
       name: "myinput",
       props:{
           value:{ //获取父组件的数据value
               type:String,
               default:''
           }
       },
       methods:{
           handleInput(e){
               this.$emit('input',e.target.value) //触发父组件的input事件
           }
       }
   }
</script>
最常见的还有一种事控制模态框的展示与关闭,我们也可以用v-model 以element 的 el-dialog组件为例子
<template>
   <div>
       <kmDialog
           v-model="showDialog"
       >
       <el-button @click="show">点我</el-button>
   </div>
</template>
<script>
   import kmDialog from 'KmDialog.vue'
   export default {
       components: {
           KmDialog
       }
       data () {
           return {
               showDialog: false
           }
       },
       methods: {
           show() {
               this.showDialog = true
           }
       }
   }
</script>
<template>
   <el-dialog
       :title="isEdit ? '编辑设备' : '新增设备'"
       :visible.sync="value"
       width="40%"
       @close="cancel"
     >
       <span>这是一段信息</span>
   </el-dialog>
</template>
<script>
   export default {
       props: {
           value: {
               default: false,
               type: Boolean
           }
       },
       methods: {
           cancel() {
               this.$emit('input', false)
           }
       }
   }
</script>

读到这里,这篇“vue如何实现v-model”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 怎么在vue.js中实现v-model双向数据绑定
  2. vue3实现v-model原理详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue v-model

上一篇:mysql数据库的超级管理员密码怎么修改

下一篇:C语言指针数组和数组指针的区别有哪些

相关阅读