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