使用v-model实现数据的双向绑定,下面简单演示一下v-model的用法
text <div id="demo"> <input type="text" v-model='message'> <p>You input is: {{message}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ message:'' }, updated:function(){ console.log(this.message); } }); </script> vedio <div id="demo"> <label><input type="radio" value="male" v-model='sex'>male</label> <label><input type="radio" value="famale" v-model='sex'>famale</label> <p>You sex is: {{sex}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ sex:'' }, updated:function(){ console.log(this.sex); } }); </script>checkbox
单选checkbox
<div id="demo"> <label><input type="checkbox" v-model='isCheckOrNot'>Cheakbox</label> <p>The checkbox status is: {{isCheckOrNot}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ isCheckOrNot:"" }, updated:function(){ console.log(this.isCheckOrNot); } }); </script>多选checkbox
<div id="demo"> <label><input type="checkbox" value="Cheakbox1" v-model='CheckBoxs'>Cheakbox1</label> <label><input type="checkbox" value="Cheakbox2" v-model='CheckBoxs'>Cheakbox2</label> <label><input type="checkbox" value="Cheakbox3" v-model='CheckBoxs'>Cheakbox3</label> <label><input type="checkbox" value="Cheakbox4" v-model='CheckBoxs'>Cheakbox4</label> <label><input type="checkbox" value="Cheakbox5" v-model='CheckBoxs'>Cheakbox5</label> <p>You check checkbox are: {{CheckBoxs.join('--')}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ CheckBoxs:[] }, updated:function(){ console.log(this.CheckBoxs); } }); </script>select
单选select
<div id="demo"> <select v-model="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <p>You select is : {{select}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ select:'' }, updated:function(){ console.log(this.select); } }); </script>多选select
<div id="demo"> <select v-model="selects" multiple='multiple'> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <p>You select is : {{selects.join('--')}}</p> </div> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> <script> var vm = new Vue({ el:'#demo', data:{ selects:[] }, updated:function(){ console.log(this.selects); } }); </script>