选中与多选

最近项目上遇到的一个问题，思考了挺久，和小伙伴讨论后完成了需求

需求：模块的数量不确定，每个模块初始渲染出来有样式，点击了某个按钮之后这些模块才可以进行选中，并且支持多选，选中要改变样式来区分。
实现：

简单画一下元素

代码

<template>
  <p @click="changeColor">{{ tips }}</p>
  <div v-for="(item, ids) in titles" class='div1'>{{ item.title }}</div>
</template>

<script>
export default {
  data() {
    return {
      tips: '点击解锁切换边框颜色',
      titles: [
        {
          title: '元素1',
        },
        {
          title: '元素2',
        },
        {
          title: '元素3',
        },
        {
          title: '元素4',
        },
        {
          title: '元素5',
        },
      ],
    }
  },
  methods: {
    changeColor() {
      if (this.tips == '点击解锁切换边框颜色') {
        this.tips = '现在可以点击选中更换颜色了'
      } else {
        this.tips = '点击解锁切换边框颜色'
      }
    },
  },
}
</script>

<style lang="less" scoped>
p {
  margin-left: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
div1 {
  width: 200px;
  height: 100px;
  border: 3px solid #000;
  color: cadetblue;
  margin-left: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
</style>

 接下来实现点击一次选中，再点击同一个模块取消选中，点击不同模块选中不同模块
 

解决思路：

创建一个空数组来存循环出来的模块有对应的id，初始置为空，点击模块时先判断点击时传入的id是否存在于当前数组中，一定要先判断id是否在数组中，如果不在就push进去，如果在那么就删去这个id，这样就处理了点击时的逻辑判断，在元素的样式那里要进行点击的元素唯一确定性的判断，这样就可以完成需求，说的可能有点模糊，上代码
 

<template>
  <p @click="changeColor">{{ tips }}</p>
  <div
    v-for="(item, ids) in titles"
    @click="getBorder(ids)"
    :class="arr1.indexOf(ids) > -1 ? 'div2' : 'div1'"
  >
    {{ item.title }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      tips: '点击解锁切换边框颜色',
      // 是否允许点击选中，初始为false
      canChange: false,
      titles: [
        {
          title: '元素1',
        },
        {
          title: '元素2',
        },
        {
          title: '元素3',
        },
        {
          title: '元素4',
        },
        {
          title: '元素5',
        },
      ],
      // 存储点击的模块ids
      arr1: [],
    }
  },
  methods: {
    // 切换按钮
    changeColor() {
      if (this.tips == '点击解锁切换边框颜色') {
        this.tips = '现在可以点击选中更换颜色了'
        this.canChange = true
      } else {
        this.tips = '点击解锁切换边框颜色'
        // 如果按钮切换回不能点击，则将canChange值改为false并且将arr1置为空
        this.canChange = false
        this.arr1 = []
      }
    },
    // 点击模块
    getBorder(ids) {
      // 先根据canChange的值来判断是否能点击
      if (this.canChange) {
        //用indexOf去判断当前点击的模块的ids是否存在于arr1中，定义一个值去接收这个判断的值
        let ind = this.arr1.indexOf(ids)
        // indexOf用来判断该数组中是否存在这个值，若不存在则返回-1，否则返回元素下标
        if (ind > -1) {
          // 存在这个值，从数组中删去这个值
          this.arr1.splice(ind, 1)
        }
        // 不存在这个值那就push进arr1
        else {
          this.arr1.push(ids)
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
p {
  margin-left: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.div1 {
  width: 200px;
  height: 100px;
  border: 3px solid #000;
  color: cadetblue;
  margin-left: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.div2 {
  width: 200px;
  height: 100px;
  border: 3px solid rgb(133, 196, 18);
  color: cadetblue;
  margin-left: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
</style>