当前位置：首页>科技>vue.js构建Vue.js框架学习数据绑定
发布时间：2026-07-21阅读(1)
单项数据绑定用“v-bind”指令，数据只能从Vue实例的data属性流向页面，当data属性值发生变化，页面中对应的值也会随之变化，但页面中的值变化，不会对data属性值产生影响。
模板容器和Vue实例<body> <div id="root"> <input type="text" v-bind:value="name"> <span>{{name}}</span> </div></body><script> new Vue({ el:#root, data:{ name:百度 } })</script>
修改input框内的值，Vue实例data中的name不会发生变化，因此span标签内的值也不会发生变化
<body> <div id="root"> <input type="text" :value="name"> <span>{{name}}</span> </div></body><script> new Vue({ el:#root, data:{ name:百度 } })</script>
双向数据绑定用“v-model”指令，数据不仅能从Vue实例的data属性流向页面，还可以从页面流向data属性，当data属性值发生变化，页面中对应的值也会随之变化，反之页面中的值变化，对应的data属性值也会随之变化。
模板容器和Vue实例<body> <div id="root"> <input type="text" v-model:value="name"> <span>{{name}}</span> </div></body><script> new Vue({ el:#root, data:{ name:百度 } })</script>
修改input框内的值，Vue实例data中的name值也会随之发生变化，从而引起span标签内的值发生变化
<body> <div id="root"> <input type="text" v-model="name"> <span>{{name}}</span> </div></body><script> new Vue({ el:#root, data:{ name:百度 } })</script>
注：双向绑定一般都应用在表单类元素上，如input、select等。
下一篇：如何注册qq号 怎样注册qq号
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
