之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据
<div id="divApp"> <p>{{msg}}</p><br/> <!--v-model实现数据双向绑定,只能运用在表单元素中--> <input type="text" v-model="msg" /> </div> <script> var v = new Vue({ el: '#divApp', data: { msg: '今天是几月几号啊!!!', }, methods: { } }) </script>
页面初始化加载时,p标签和text文本框的内容都是msg的内容,当我们修改文本框内容时,发现p标签中的内容也跟着变化了,即view的数据被更新到了model,这就是双向绑定。
这个经常会用到。
上一篇