1. 文本框绑定v-module
<div id="app">
<input type="text" v-model="msg" value="666"> // 表单使用v-mode时value会失效
{{msg}}
</div> <script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: ''
}
})
</script>
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>
常用的双向数据绑定大概是以上几种情况，双向数据绑定也多用于表单中。