vue的数据绑定,单向数据绑定以及双向数据绑定

 MeLiu   2021-02-05 10:20   3861 人阅读  0 条评论

单向数据绑定以及双向数据绑定

单向数据绑定 :value

<div id="div">
    <input type="text" :value="input_val">
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            input_val: 'hello world '
        }
    })
</script>

浏览器渲染结果: <div id="div"><input type="text" value="hello world"></div>

通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'  

浏览器渲染结果: <div id="div"><input type="text" value="Vue"></div>

我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据


双向数据绑定 v-model

<div id="div">
    <input type="text" v-model="input_val" >
</div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            input_val: 'hello world '
        }
    })
</script>

通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定  ;

不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;



本文地址:http://mobaishare.com/post/45.html
版权声明:本文为原创文章,版权归 MeLiu 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?