v-model是什么？如何使用？如何实现双向数据绑定？
v-model是什么？v-model是vue的model层的data属性，实现输入值与数据域的双向绑定；如何使用？在需要用户输入或者选择值的时候，可使用v-model，其值要与data数据域中的属性值对应，这样就能实现绑定；双向绑定的实现：页面显示的语法糖：<input v-model="msg" type="text" />，（语法糖的意思是仅供显示）；实际上面等同于：&...
·
v-model是什么？
v-model是vue的model层的data属性，实现输入值与数据域的双向绑定；
如何使用？
在需要用户输入或者选择值的时候，可使用v-model，其值要与data数据域中的属性值对应，这样就能实现绑定；
双向绑定的实现：
页面显示的语法糖：<input v-model="msg" type="text" />，（语法糖的意思是仅供显示）；
实际上面等同于：<input v-bind:value="msg" v-on:input="msg = $event.target.value">，简写即<input v-bind:value="msg" v-on:input="msg = arguments[0]">
故，要让组件的v-model生效，它必须接受一个value属性（用于v-bind绑定响应式数据），且在有新的value时触发input事件并传递数据
另：vue对v-model实现的一个规则：使用了v-model的组件会自动监听input事件并把这个input事件所携带的值传递给v-model所绑定的属性；
HTML部分
<body>
<div id="itany">
<input v-model="msg" type="text">
<p>{{ msg }}</p>
<!--两对大括号{{}}称之为模板，用来进行数据的绑定显示在页面中-->
</div>
</body>
JavaScript 部分
<script>
const vm = new Vue({
el: '#itany',//挂载点
data: {
msg: "hello world" //双向数据绑定的值
}
});
</script>
未完待续…
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)