【Vue】＜input＞标签中使用v-model与v-bind进行数据绑定的区别
在<input>标签中，可以使用v-model或v-bind将输入框的value与app的某个变量进行绑定，但是，v-model实施的是双向数据绑定，即双方任何一方的变动都会同步变化到另一方，而v-bind实施的是单项数据流的绑定，可以动态更新HTML元素上的属性。下面看两个例子以对v-model和v-bind进行区分：v-model 示例：<!DOCTYPE html>&
·
在<input>标签中，可以使用v-model或v-bind将输入框的value与app的某个变量进行绑定，但是，v-model实施的是双向数据绑定，即双方任何一方的变动都会同步变化到另一方，而v-bind实施的是单向数据流的绑定，可以动态更新HTML元素上的属性。
下面看两个例子以对v-model和v-bind进行区分：
v-model 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label>
<input v-model="message" placeholder="edit me">
</label>
<p>Message is: {{ message }}</p>
<button type="button" @click="message = '按下button会变成我'">button</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
运行后可以看到，当对app.message和input.value的任何一方做修改时，都会引起另一方的数据变化，此即双向数据绑定。
v-bind 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label>
<input :value="message" placeholder="edit me">
</label>
<p>Message is: {{ message }}</p>
<button type="button" @click="message = '按下button会变成我'">button</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
运行后可以看到，当input.value变化时，并不会引起app.message的变化，但app.message的变化会引起input.value的变化，这就是单项数据流。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)