Vue中数据绑定方式有两种：单向绑定和双向绑定
单向绑定(v-bind)
数据只能从data流向页面
使用：v-bind:value="xxx"或者:value="xxx"
双向绑定(v-model)
数据只不仅能从data流向页面,还能从页面流向data
使用：v-model:value="xxx"或者v-model="xxx"
备注：
1.双向绑定一般用于表单类元素上（如input select等）
2.v-model:value可简写为v-model,因为v-model默认收集的就是value值
使用
<body>
<!--
vue中两种数据绑定方式
1.单向绑定（v-bind）:数据只能从data流向页面
2.双向绑定（v-model）:数据只不仅能从data流向页面,还能从页面流向data
备注：
双向绑定一般用于表单类元素上（如input select等）
v-model:value可简写为v-model,因为v-model默认收集的就是value值
-->
<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">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
name:"北京大学",
}
})
</script>
</body>
网友评论