在vue项目中如何使用多选框?结合前段时间工作中的需求写了这个笔记。
在template里面写入<input>标签并指定类型type为checkbox,:value用来绑定当前项的value,v-model绑定一个数组,一旦当前项被选中,该项的value会被添加至被绑定的数组中。
<input type="checkbox" name="checkBoxTest" :value='0' v-model="place" />北京 <input type="checkbox" name="checkBoxTest" :value='1' v-model="place" />上海 <input type="checkbox" name="checkBoxTest" :value='2' v-model="place" />广州 <input type="checkbox" name="checkBoxTest" :value='3' v-model="place" />深圳 <div>{{place}}</div>
export default { name: 'App', components: { }, data(){ return{ place:[] } } }
place为绑定的数组,具体效果如下图所示