Vue 2.x – 数据绑定

单向数据绑定

单向数据绑定用v-bind 实现

  <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name">
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                name: "小白"
            }
        })
    </script>

输入框内值改变不会引起data中的name值改变，但是data中的name改变会影响输入框中的值改变。

双向数据绑定

单向数据绑定用v-model 实现

    <div id="root">
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                name: "小白"
            }
        })
    </script>

输入框中的值改变，data中的name值也会改变。

简写

单向数据绑定：<input type="text" :value="name">
双向数据绑定：<input type="text" v-model="name">

注意

v-model 只能用在表单类元素（输入类元素）中，以下代码是错误的

<h2 v-model:x="name">我是H2</h2>