vue中有2种数据绑定的方式
- 单项数据绑定(v-bind):数据只能从data流向页面,data中数据发生变化页面数据也会随之变化,页面数据改变data中数据不会随之变化。
- 双向数据绑定(v-model):数据不仅能从data流向页面,也能从页面流向data
(注意:双向绑定不是所有元素都可以使用,一般都应用在表单类元素上如:input、select、checkbox等)
<body>
<div id="root">
<!--普通写法-->
单项绑定:<input type="text" v-bind:value="name"/><br/>
双向绑定:<input type="text" v-model:value="name"/><br/>
<!--简写-->
单项绑定:<input type="text" :value="name"/><br/>
双向绑定:<input type="text" v-model="name"/><br/>
<!--如下代码是错误的,因为v-model只能应用在表达类元素(输入类元素)上-->
<h2 v-model="name">数据绑定</h2>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:"数据绑定"
}
})
</script>