4. v-model双向绑定
代码演示1
双向绑定就是一起发生变化
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<input type="text" v-bind:value="user.name"></input>
<!-- 双向绑定 就是自己变化会带着相关信息都发生变化 -->
<input type="text" v-model="user.name"></input>
<p>{{user.name}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
//创建user对象并给属性赋值
user: {
name: 'xuan'
}
}
})
</script>
</body>
代码演示2
Vue 还提供了 v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app">
文本输入框:<input type="text" v-model="message">{{message}}
</div>
<script>
var vm=new Vue({
el: "#app",
data:{
message: "sdbfuw"
}
});
</script>
代码演示3
<div id="app">
下拉框:
<select v-model="selected" >
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>value:{{selected}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: ""
}
});
</script>