[TOC]
>[success] # vue复选框逻辑
项目中有一个需求，要求4个按钮，点击每个按钮就个数组中添加一个值，再次点击时候如果数组中有这个值就需要删除这个值，并且还要选中时候添加样式，代码如下：
1. html代码部分：
~~~javascript
<template>
<div>
<button :class="item.type ? 'style1' : 'style2'" v-for="(item,index) in list" :key="index" @click="clickBtn(item)">
{{item.title}}
</button>
</div>
</template>
~~~
2. vuejs代码部分：
~~~javascript
<script>
export default {
data(){
return{
list: [
{
title: "按钮1",
value: "btn1",
type:false
},
{
title: "按钮2",
value: "btn2",
type:false
},
{
title: "按钮3",
value: "btn3",
type:false
},
{
title: "按钮4",
value: "btn4",
type:false
}
],
list2: []
}
},
methods:{
clickBtn(val){
// 按钮的样式直接取反
val.type = !val.type
// indexOf如果有值会返回这个值在数组中的索引值
let judgment= this.list2.indexOf(val.value)
if(judgment !== -1){
this.list2.splice(judgment,1)
}else{
this.list2.push(val.value)
}
}
}
}
</script>
~~~
3. css样式部分：
~~~
<style>
.style1{
background: red;
}
.style2{
background: blue
}
</style>
~~~
- vue复选框逻辑
- get请求给后台传数组
- 提交表单时传值参数处理方案
- Element ui上传图片功能
- async和await的使用
- 时间戳转换
- 日期格式转换时间戳
- 时间戳转换日期格式
- 对深拷贝的认知总结
- vue-右键菜单功能
- textarea中换行、回车、空格的识别与处理
- element ui表格合并
- 合并行（上下行）
- 双层for循环
- 数组去重
- 瀑布流
- 前端多条件筛选
- 闭包的理解
- 改变this指向
- vue单选框逻辑
- 对象数组根据某个属性来进行排序
- vscode插件整理
- 对象数组多条件去重
- Blob类型数据转换Json数据类型
- Element ui做批量上传功能
- 前端cookie和后端cookie
- 强制转换https协议
- 给事件传额外参数
- 树形结构数据处理
- 查找所有父级数据
- 根据id筛选单条数据
- 动态引入阿里图标库
- 四舍五入
- 封装一个Promise.allSettled方法
- 判断输入框内是否有emoji表情
- element-ui的popover组件位置偏移
- formData上传文件时，携带【数组对象参数】
- 前端解压压缩包（zip）解压后上传解压的文件
- element ui表格列相同解决办法
- elementUI，table复选框多选，翻页/切换条数时保持选中状态
- cookie 和 token 的区别