您的位置：首页 > 产品设计 > UI/UE

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

2018-03-06 14:29 746 查看

首先如下代码使用

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" >

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航