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 }
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了VueCli生产环境打包部署跨域失败的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了Vue计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
详解mpvue scroll-view自动回弹bug解决方案
设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方，非常具有实用价值，需要的朋友可以参考下2018-10-10
vue中element-ui不能修改el-input框,或是不能修改某些值问题
这篇文章主要介绍了vue中element-ui不能修改el-input框,或是不能修改某些值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
vue draggable resizable gorkys与v-chart使用与总结
这篇文章主要介绍了vue draggable resizable gorkys与v-chart使用与总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于使用vue3+ts打开echarts的正确方式,在Vue3中使用ECharts组件可以方便地创建各种数据可视化图表,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了在vue中使用rules对表单字段进行验证方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍是八种vue实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合 兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容2021-09-09
最新评论