vue中的v-model能够实现数据的双向绑定,也是vue的最突出的优势。其实v-model实际上是一个语法糖。其中的原理很简单,主要包括属性绑定事件监听两部分,废话不多说,先举个v-model实现数据双向绑定的例子:

  <div id="app">
    <p>v-model绑定的数据为:{{value1}}</p>
    <input type="text" v-model="value1">
  </div>
  <script src="./lib/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      value1: ''
    }
  })
</script>

实现的效果如下:在这里插入图片描述
当你在input输入框中输入内容的时候,上面p标签里面的数据实时发生变化(实际上是value1这个数据发生了响应式变化)。相反改变代码中value1值,input输入框中值也会实时变化。

其原理实现如下:

  <div id="app">
    <p>v-model绑定的数据为:{{value1}}</p>
    <input type="text" v-model="value1">

++  <p>绑定的数据为:{{value2}}</p>
++  <input type="text" :value="value2" @input="changeVal">
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value1: '',
++      value2: ''
      },
++    methods: {
++      changeVal (e) {
++        this.value2 = e.target.value
++      }
++    }
    })
  </script>

实现效果与v-model相同:

在这里插入图片描述

解释:

  1. 首先input输入框通过属性绑定:value="value2"得到响应数据value。(model → view)
  2. 定义一个changeVal函数,通过e.target得到input框中的value值。
  3. 最后input输入框通过@input事件监听,绑定changeVal函数,将input框中的value值传给value2。(view → model)
Logo

前往低代码交流专区

更多推荐