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到我们写的类

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/包含”这个函数判断包含不包含,再用三运算符把当前值给进去

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

题外话

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

三元运算符  a ? b : c;

可以理解简化为

1
2
if(a){  a=b; }
else{  a=c  }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_45973327/article/details/120567594

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 优雅的处理vue项目异常实战记录

    优雅的处理vue项目异常实战记录

    这篇文章主要给大家介绍了关于如何优雅的处理vue项目异常的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • openlayers6之地图覆盖物overlay详解

    openlayers6之地图覆盖物overlay详解

    overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧
    2021-09-09
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01
  • vue项目首次打开时加载速度很慢的优化过程

    vue项目首次打开时加载速度很慢的优化过程

    这篇文章主要介绍了vue项目首次打开时加载速度很慢的优化过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue对象的组成和挂载方式详解

    Vue对象的组成和挂载方式详解

    这篇文章主要介绍了Vue对象的基本组成和Vue对象挂载的几种方式,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07
  • Vue2与Vue3中Ref绑定元素方式

    Vue2与Vue3中Ref绑定元素方式

    这篇文章主要介绍了Vue2与Vue3中Ref绑定元素方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解Vue.js和layui日期控件冲突问题解决办法

    详解Vue.js和layui日期控件冲突问题解决办法

    这篇文章主要介绍了详解Vue.js和layui日期控件冲突问题解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue实现上传图片添加水印(升级版)

    vue实现上传图片添加水印(升级版)

    这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue树形结构数据处理的方法总结

    vue树形结构数据处理的方法总结

    在项目开发的过程中,会经常使用树形结构数据,前后端交互都会对数据进行处理,后端返回的数据前端有的时候不能直接使用需要转换,本文小编整理了一些项目中用到的处理方法,需要的朋友可以参考下
    2023-11-11
  • 基于element-ui的rules中正则表达式

    基于element-ui的rules中正则表达式

    今天小编就为大家分享一篇基于element-ui的rules中正则表达式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论