当前位置: 首页 > 未分类>阅读正文

在vue中使用checkbox

2022.8.11 朱丰华 115 次 留下评论 488字

在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>

vue部分:

export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      place:[]
    }
  }
}

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注