1. 文本框绑定 v-module
2. 单选按钮绑定 v-module
<div id="app">
<input type="radio" v-model="msg" value="man">
<input type="radio" v-model="msg" value="woman">
{{msg}} //msg 表示选中按钮的 value 值
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ''
}
})
</script>
3. 复选框按钮绑定 v-module
<div id="app">
<input type="checkbox" value="html" v-model="msg">
<input type="checkbox" value="CSS" v-model="msg">
<input type="checkbox" value="javascript" v-model="msg">
{{msg}} //mag 表示选中按钮的 value 值
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: []
}
})
</script>
4. 选中列表绑定 v-module
<div id="app">
<select v-model="msg">
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: []
}
})
</script>
常用的双向数据绑定大概是以上几种情况, 双向数据绑定也多用于表单中.
来源: http://www.bubuko.com/infodetail-2481324.html