在vue中使用checkbox

2022/1/5 23:04:00

本文主要是介绍在vue中使用checkbox,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在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为绑定的数组,具体效果如下图所示

 



这篇关于在vue中使用checkbox的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程