Vue el使用el-checkbox-group复选框进行单选框方式
更新时间：2023年10月16日 14:52:03 作者：山空响不散
这篇文章主要介绍了Vue el使用el-checkbox-group复选框进行单选框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue el 使用el-checkbox-group复选框进行单选框
让复选框进行单选框操作
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 }
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3中的响应式系统由Proxy实现,它取代了Vue2中的Object.defineProperty,提供了更强大的功能和更好的性能,下面给大家介绍Vue3实现双向绑定的基本原理和代码示例解析,感兴趣的朋友一起看看吧2024-12-12
最近做了个项目需要做数字滚动增加的效果，刚开始接到这个项目还真是懵了，后来发现实现代码很简单的，下面小编给大家带来了vue 实现数字滚动增加效果的实例代码，需要的朋友参考下吧2018-07-07
这篇文章主要为大家介绍了vue.js前端网页弹框异步的行为示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助祝大家多多进步，早日升职加薪2021-11-11
下面小编就为大家分享一篇解决vue处理axios post请求传参的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了Vue 2.0 服务端渲染入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue 用Vant实现时间选择器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
平时写vue的时候知道 props 有很多种用法，今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值，需要的朋友可以参考下2019-01-01
Vue.js的Mixins功能允许封装可复用的组件选项,实现代码复用和模块化,Mixins可以包含数据、方法、生命周期钩子等组件选项,使用时,Mixins中的选项会被混入组件中,优先级低于组件自身选项,优点包括代码复用、高灵活性和简单易用2024-09-09
本篇文章主要介绍了Vue2 使用 Echarts 创建图表实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论