有关Vue.js中的v-model的说明

版权声明:转载请注明出处! https://blog.csdn.net/zjq_1314520/article/details/79457883

首先如下代码使用v-model可以实现数据的绑定,也就是说我们在输入框中输入什么数据,对应的<span>标签中就会显示什么数据

<body>
  <div id="app">
    <input type="input" v-model="url" >
    <br/>
    <span>{{url}}</span>
  </div>

  <script>
    var v = new Vue({
      el: '#app',
      data: {
        url: "Hello World"
      }
    })
  </script>
</body>

这一点貌似很像Angular中的ng-model,但是Angular是双向数据绑定的,而我们的Vue是单项数据流的,所以说v-model实际上只是一种语法糖

上面的代码<input type="input" v-model="url" >实际上是如下的写法的简写

    <input type="input" v-bind:value="url" v-on:input="url=$event.target.value">

有于 Vue.js对于最常用的两个指令v-bind:v-on:设置了简写规则,所以上面的代码可以更加简化

    <!-- v-bind: -> :    &    v-on: -> @ -->
    <input type="input" :value="url" @input="url=$event.target.value">

上面这段代码的意思是,首先将当前输入框里面的值更新为url的值,然后如果当前的输入框有新的内容输入,响应相应的事件,将url的值设置为当前输入框里面的值。

详细可以查看如下代码的显示差异

    <input type="input" v-model="url">
    <input type="input" :value="url" @input="url=$event.target.value">
    <input type="input" @input="url=$event.target.value">

这个时候如果我们想将其用于其他的input组件上面时,对于类似于checkbox button radio等组件的时候,其并没有相应的input事件,那么应该要怎样解决呢?

我们在知道了v-model的原型的时候,这个问题就非常的容易解决了,可以将代码写成如下的形式:

    <input type="button" :value="attr" @click="attr = $event.target.value" >
    <input type="radio" name="t-url" :value="url" @change="url = $event.target.checked" >
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页