vue中v-model详解

  • ​​v-model​​​ 本质上是一个语法糖，是​​v-bind​​​和事件监听（​​@input​​）的合并操作。
  • vue使用​​v-model​​实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素，经常在和这类表单元素中进行使用。
  • 如下代码​​<input v-model="test">​​​本质上是​​<input :value="test" @input="test = $event.target.value">​​​，其中​​@input​​​是对​​<input>​​​输入事件的一个监听​​:value="test"​​​是将监听事件中的数据放入到​​input​​。
  • ​​v-model​​​不仅可以给​​input​​​赋值还可以获取​​input​​​中的数据，而且数据的获取是实时的，因为语法糖中是用​​@input​​​对输入框进行监听的。可以在​​div​​​中加入​​<p>{{ test}}</p>​​​获取​​input​​​数据，然后去修改​​input​​​中数据会发现​​<p></p>​​中数据随之改变。
  • 举例说明：
<div id='app'>
  <input v-model='test'>
  <!-- <input :value='test' @input='test=$event.target.value'> 这里是一个语法糖-->
</div>
<script src='../js/vue.js'></script>
<script>
  new Vue({
    el:'#app',
    data:{
      test:'测试'
    }
  })
</script>