Vue el使用el-checkbox-group复选框进行单选框方式
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
Vue el 使用el-checkbox-group复选框进行单选框
让复选框进行单选框操作
el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作
页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂。
重要的是@chage到我们写的类
1 2 3 4 | < 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绑定了所以必须要有值不然整个都显示不出来,注意小细节
1 2 3 4 5 6 7 8 9 | const cityOptions = [ '上海' , '北京' , '广州' , '深圳' ]; export default { data () { return { checked: [ '上海' ], //不能为null,必须要有值 cities: cityOptions }; } } |
经过我的踩坑,不能直接this.checked=[]或者等于null。因为绑定之后的数组里面有特定参数,也不能直接把this.checked=city
这就需要使用到“includes/包含”这个函数判断包含不包含,再用三运算符把当前值给进去
题外话
三运运算符 ?问号左边的是判断结果为true或false,只有?问号左边为布尔值才能跳到右边,如果为true就按循序得第一个[city] 为false就第二个
三元运算符 a ? b : c;
可以理解简化为
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论