Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value可以简写为v-model,因为v-model默认收集的就是value值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板语法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定:<input type="text" v-bind:value="name"> <br/> 双向数据绑定:<input type="text" v-model:value="name"> --> <!-- 简写 --> 单向数据绑定:<input type="text" :value="name"> <br/> 双向数据绑定:<input type="text" v-model="name"> <!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 --> <h2 v-model:x="name">你好啊</h2> </div> <script type="text/javascript"> Vue.config.productionTip = false //阻止vue在启动时生成生产提示 new Vue({ el:'#root', data:{ name:'小飞侠' } }) </script> </body> </html>
Vue数据绑定
于 2022-07-20 20:38:54 首次发布
本文介绍了Vue.js中的两种数据绑定方式:单向绑定(v-bind)和双向绑定(v-model)。单向绑定使数据从data流向视图,而双向绑定则允许数据在data和视图之间双向同步。v-model通常用于表单元素,如input和select,且错误示例展示了v-model不能应用于非表单元素。通过实例演示了如何在HTML中使用这两种绑定方式。
摘要由CSDN通过智能技术生成