需求是这样:

首先考虑使用elementui中的组建实现,但是有时候会忽略组建。实现方式两种:

1.直接使用element实现

let weekTimeData: [
'星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'
] <el-checkbox-group v-model="form.setting_week" class="mr12">
<el-checkbox-button v-for="(item,index) in weekTimeData" :key="index" :label="item">{{ item }}</el-checkbox-button>
</el-checkbox-group>

2.使用原生js去实现

<span
v-for="(item,index) in weekTimeData"
:key="index"
:class="{'active':selected.indexOf(item)!=-1}"
@click="active(index,item)"
> {{ item }}
</span> selected:[] // 方法
active(index, item) { if (this.selected.indexOf(item) !== -1) {
this.selected.splice(this.selected.indexOf(item), 1); // 取消
} else {
this.selected.push(item);// 选中添加到数组里
}
this.form.setting_week = this.selected;
}, //style需要写样式

比较推荐使用elemnt ui的方法,我在开发的时候,忘记了使用element ui,导致多写了几行代码。

vue实现按钮多选的更多相关文章

  1. VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列

    按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件.先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', val ...

  2. java script第一篇(按钮全选的实现)

    今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...

  3. 用Vue实现一个全选指令

    最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...

  4. Chapter 4. Button, Checkbutton, and Radiobutton Widgets 按钮,复选按钮,单选按钮

    Chapter 4. Button, Checkbutton, and Radiobutton Widgets   按钮,复选按钮,单选按钮 几乎所有的Perl/Tk 应用使用按钮以这样或者那样的方式 ...

  5. svn提交按钮灰选

    1.当我新建了一个文件或者文件夹,要提交的时候出现ok按钮灰选,提交不了. 解决方法:提交信息多写一些字儿就可以了,挥着回车换行也行 2.报错:you need to upgrade the work ...

  6. vue单选,多选,多选的内容显示在页面可删除

    vue做单选只能选一个 <template> <div class="list"> <!-- 多行多列单选 --> <span>只能 ...

  7. vue + elementui 使用多选按钮实现单选功能

    CommonRadio.vue <template> <div> <el-checkbox-group v-model="checkList" @ch ...

  8. vue案例 - 使用vue实现自定义多选与单选的答题功能

    4月底立得flag,五月底插上小旗,结果拖到六月底七月初才来执行.说什么工作忙都是借口,就是睡的比猪早,起的比猪晚. 本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常 ...

  9. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue实现checked 全选功能

    记录一下 module.data = {  result: {}, items: [] //初始化全选按钮, 默认不选 ,isCheckedAll: false};module.vue = new V ...

随机推荐

  1. 【Java学习Day07】标识符

    标识符 Java使用的组成部分的需要名字.类名.变量名以及方法名都被称为标识符 标识符的注意点 所有的标识符都应该以字母(A-Z或者a-z),美元符($).或者下划线(_)开始 首字符之后可以是字母( ...

  2. grep展示相邻行

    grep搜索展示匹配行的上面或下面相邻的行: # grep -A 1 pattern file -A选项,是 After 的缩写,表示除了展示匹配行之外,还要展示出匹配行下面的若干行.而示例中的 -A ...

  3. 在wsl 2中编译自己的魔趣(mokee) ROM

    1.安装wsl2 a.在windows 10 系统中启用wsl2(只能是wsl2,wsl1 会编译失败), 并商店中下载ubuntu镜像,商店默认安装位置为C:\Program Files\Windo ...

  4. 2022-11-22学习内容-Client端代码编写-数据删除

    1.Client端代码编写 1.1activity_content_write.xml <?xml version="1.0" encoding="utf-8&qu ...

  5. qt 单元测试遇到的问题

    升级了qt creator到新版本.使用 google 单元测试,发现一个单元测试显示不对了. 测试结果输出:FATAL, 项目"t_ps"的测试未产生任何预期输出 比较了几个测试 ...

  6. [Oracle19C 数据库管理] 管理存储与表空间

    存储概览 存储的架构 Control File:储存了数据物理存储的信息.存在多个副本来避免单点故障.没有控制文件,数据库无法打开. DATA File: 存储用户与应用的信息,以及元数据与数据字典. ...

  7. JSON::ParserError - 416: unexpected token at

    rm -rf ~/.cocoapods/repos/Spec_Lockandrm -rf ~/.cocoapods/repos/trunk/

  8. EF Core如何到回滚上一次迁移

    update-database 上上次迁移记录 让数据库回滚 remove-migration 删除本次有误的迁移文件 修改完毕后 add-migration updata-database 完成

  9. Vue的hash/history模式

    hash路由模式 URL 中的 hash 值只是客户端的一种状态,向服务端发送请求的时候,hash 部分不会被发送: hash 值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退.前进控 ...

  10. 使用VS Code打造完美的嵌入式IDE

    参考这个博主https://blog.csdn.net/qq_34245464/article/details/100769643的博文, 使用VS Code再重新打造一次完美的嵌入式IDE平台. 前 ...