有关Vue.js中的v-model的说明
Posted 十木禾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有关Vue.js中的v-model的说明相关的知识，希望对你有一定的参考价值。
首先如下代码使用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" >以上是关于有关Vue.js中的v-model的说明的主要内容，如果未能解决你的问题，请参考以下文章