标签：el checkbox group city 绑定 运算符 checked

el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作

页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage到我们写的类

        <el-checkbox-group v-model="checked" size="medium">
          <el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">{{ city }}
          </el-checkbox-button>
         </el-checkbox-group>

注意checked与v-model绑定了所以必须要有值不然整个都显示不出来，注意小细节

  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data () {
      return {
        checked: ['上海'],//不能为null，必须要有值
        cities: cityOptions
      };
    }
  }

经过我的踩坑，不能直接this.checked=[]或者等于null。因为绑定之后的数组里面有特定参数，也不能直接把this.checked=city
这就需要使用到“**includes**/包含”这个函数判断包含不包含，再用三运算符把当前值给进去

    checkbox(city) {
      this.checked = this.checked.includes(city) ? [city] : [];
    },

题外话：三运运算符 ？问号左边的是判断结果为true或false，只有？问号左边为布尔值才能跳到右边，如果为true就按循序得第一个[city]  为false就第二个

三元运算符  a ? b : c;
可以理解简化为
        if(a){  a=b; }
         else{  a=c  }

希望上述内容能帮到你

标签：el,checkbox,group,city,绑定,运算符,checked
来源： https://www.cnblogs.com/liaote/p/15411767.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。