Vue2之v-model 指令：获取和设置表单元素的值（双向数据绑定）
发布：智码IT网 阅读：
<!--
v-model 指令：获取和设置表单元素的值（双向数据绑定）
-->
<div id="app">
<input type="text" v-model="name">
<p>您正在录入的是:{{name}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name:"张三",
},
});
</script>
运行效果：页面加载完毕，文本框即显示了name的值：张三，p标签也读取出name的值，如图所示：
接下来，尝试修改文本框的内容，发现只要文本框内容的值一变，p标签的值也同步更新为文本框的value值，如图所示：
我们知道p标签的值是从name属性读取的，这说明只要input文本框的内容变更，name属性的值也是同步变更的，即所谓的表单元素的value值和data的成员数据是双向绑定的，任何一个更改，另一方也会随之更改。
上一篇：没有了
下一篇：没有了