1.v-model作用；

1.v-model本质上是语法糖，他可以在表单元素上创建双向数据绑定，并且根据不同的控件选择不同的方式更新元素
v-model会忽略表单元素本身的value checked selected值，而是把vue实例中的数据来源作为初始值
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

2.v-model的实现原理

v-model本质上是语法糖，实现双向数据绑定还是要使用 v-bind 绑定属性 @oninput绑定事件传递数据实现的，

举个例子，原生js我们想要实现顺向数据绑定该如何实现：

<body>
    <input type="text" id="myInput" oninput="myFunction()">
    <p id="demo"></p>
    <script>
        function myFunction() {
        var x = document.getElementById("myInput").value;
        document.getElementById("demo").innerHTML = "您输入了: " + x;
    }
    </script>
</body>

看效果：

接下来，我们用vue实现:

1.input实现双向数据绑定

<template>
  <div id="app">
     <h1 style="color:red">$attrs</h1>
     <input type="text" :value="str" @input="changeVal($event)">
     <p>{{str}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return{
          str:''
      }
  },
  methods:{
      changeVal($event){
         this.str=$event.target.value
      }
  }
}
</script>

从代码中我们可以看到，我们并没有直接使用v-model,而是使用 value 属性和 input 事件 自html5开始,input每次输入都会触发oninput事件，所以输入时input的内容会绑定到sth中，于是sth的值就被改变

2.复选框实现双向数据绑定：

<template>
  <div id="app">
     <input type="checkbox" :checked="flag" @change="changeFlag($event)">
     <p>{{flag}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return{
          flag:true
      }
  },
  methods:{
      changeFlag($event){
          this.flag=$event.target.checked
      }
  }
}
</script>

单选框复选框实现双向数据绑定使用v-bind绑定 checked 属性再执行 change事件

3.select实现双向数据绑定

<template>
  <div id="app">
      <select name="" id="" v-model="selectedVal" @change="changeSelected($event)">
          <option :value="val.value" v-for="(val,index) in selected" :key="index">{{val.name}}</option>
      </select>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return{
         
          selectedVal:'A',
          selected:[
              {
                  name:"小明",
                  value:"A"
              },
              {
                  name:"小红",
                  value:"B"
              },
              {
                  name:"小刚",
                  value:"c"
              },

          ]
      }
  },
  methods:{
      changeSelected($event){
          this.selectedVal=$event.target.value
      }
  }
}
</script>

select 字段将 value 作为 prop 并将 change 作为事件。

Vue | 面试题——v-model作用 及 v-model实现原理

1.v-model作用；

2.v-model的实现原理

Vue | 面试题——v-model作用及 v-model实现原理