radio中在以前需要绑定name才能使他们互斥,radio,checkbox直接在input中加入v-model即可实现双向数据绑定,而在select中需要在select上绑定v-model,不能再option中绑定v-model。
<div id="app"> 单选框 <div> <label for=""><input type="radio" value="male" v-model="sax">男</label> <label for=""><input type="radio" value="female" v-model="sax">女</label> <div> 选择的是:{{sax}} </div> </div> 多选框 <div> <label for=""> <input type="checkbox" value="香蕉" v-model="fruit">香蕉 <input type="checkbox" value="苹果" v-model="fruit">苹果 <input type="checkbox" value="葡萄" v-model="fruit">葡萄 <input type="checkbox" value="橘子" v-model="fruit">橘子 </label> <div> 选择的是:{{fruit}} </div> </div> select--选择一个 <div> <select name="" id="" v-model="habits1"> <option value="篮球">篮球</option> <option value="足球">足球</option> <option value="羽毛球">羽毛球</option> <option value="乒乓球">乒乓球</option> </select> <div> 选择的是:{{habits1}} </div> </div> select--选择多个 <div> <select name="" id="" v-model="habits2" multiple> <option value="篮球">篮球</option> <option value="足球">足球</option> <option value="羽毛球">羽毛球</option> <option value="乒乓球">乒乓球</option> </select> <div> 选择的是:{{habits2}} </div> </div> </div> <script> new Vue({ el:"#app", data() { return { sax:'', fruit:[], habits1:'', habits2:[] } }, }) </script>