Vue.js 学习笔记 六 v-model 双向绑定数据

之前说的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，这就是双向绑定。

这个经常会用到。

上一篇

Vue.js 学习笔记 五 常用的事件修饰符