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>

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>