Vue中v-model和v-bind:value的区别

以input为例

一、Vue中v-model和v-bind:value的区别

1.v-model

 //HTML
  <div>
      <input type="text" placeholder="请输入值model" name="" id="" v-model="msg">
      <div>{{msg}}v-model绑定</div>
   </div>
//JS
  export default {
  data() {
    return {
      msg:""
    }
  },

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

2.v-bind:value

  //html
 <div>
     <input " type="text" placeholder="请输入值vaue" name="" id="" v-bind:value="msg1">
     <div>value绑定:{{msg1}}</div>
  </div>
//js
 export default {
   data() {
     return {
       msg1:"123"
     }
  },

可以看到当修改输入框中的值时，data中的msg并没有跟着改变，所以｛｛msg｝｝ 中仍然显示的是初始时候的“123”

 

小结：

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

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

二、Vue中v-bind:value实现数据的双向绑定

//HtML
<div style="margin-top:10px;">
     <input style="border:1px solid sliver; " type="text" placeholder="请输入值vaue" 
         @input="text=$event.target.value" v-bind:value="text">
      <div>value双绑定:{{text}}</div>
 </div>
//JS
export default {
  name: "HelloWorld",
  data() {
    return {
      text:"123"
    }
  },

v-model原理：

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

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