双向绑定v-model与单向绑定v-bind:value

一、v-model语法糖

vue使用v-model在表单元素上创建双向数据绑定,在官方文档中简单的提到了它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能;

简单点说,如果有这样一段模板:

<input v-model="message" type="text"/>

那么 v-model 的行为,就比较类似:

 <input :value="message" @input="message = $event.target.value" type="text"/>

$event.target.value 就是把input的值赋值给message,当修改输入框中的数据时,data中的message也会跟着变化。

v-model 其实是一个语法糖,它的背后本质上是包含两个操作:

  • v-bind绑定一个value属性
  • v-on指令给当前元素绑定input事件

效果与下面的代码一样:

//html
<div>
     <input type="text" @input="handleInput" :value="message" />
     <div>{{message}}</div>
     
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
  methods:{
    handleInput(e){
      this.message = e.target.value;
    }
  }
}

二、双向绑定与单向绑定的区别

1、v-model

//html
<div>
   <input type="text" v-model="message" />
   <div>{{message}}</div>
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

双向绑定v-model与单向绑定v-bind:value

 当修改输入框中的数据时,data中的message也会跟着变化,所以上下都是显示的"123456" 

2、v-bind:value

//html
<div>
   <input type="text" v-bind:value="message" />
   <div>{{message}}</div>
</div>
 
//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

双向绑定v-model与单向绑定v-bind:value

 可以看到当修改输入框中的值时,data中的message并没有跟着改变,所以{{message}} 中仍然显示的是初始时候的“123”。

小结:

(1)v-model实现了视图和data中数据的双向绑定,二者有一个改变,另一个也会随之改变。

(2)v-bind:value 只是在初始化的时候把data中的数据绑定到input上,修改input的值不会改变data中的数据。

 

上一篇:python一行代码,实现文件共享服务器-实战


下一篇:this指向