1、v-model（双向数据绑定）
（1）通过绑定input实现双向绑定
</head>
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<div>{{input_value}}</div>
<input type="text" v-model="input_value">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
input_value:'default'
}
})
</script>
</body>
打开前端页面默认显示：
输入框重新输入后显示：
我们可以看出，当输入框的值变动时，同时绑定了“input_value”的div、input标签一起在同时变动，所以是当input框输入时，产生了联动
（2）通过button点击实现双向绑定
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<input type="text" v-model="input_value">
<!-- 绑定change -->
<input type="button" value="change" @click="change">
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
input_value:'default'
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
})
</script>
</body>
点击【change】前：
点击【change】后：
（3）通过radio进行双向绑定
<body>
<div id="app">
<div>{{sex}}</div>
// 绑定sex,默认是1，会默认勾选男
<input type="radio" value="1" name="sex" v-model="sex">男
<input type="radio" value="2" name="sex" v-model="sex">女
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
input_value:'default',
sex:1
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
})
</script>
</body>
默认显示：
点击【女】时显示：
标签：el,Vue,绑定,基础,value,input,change From： https://www.cnblogs.com/brf-test/p/16983796.html