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>
常用的双向数据绑定大概是以上几种情况,双向数据绑定也多用于表单中。