vue变更v-for列表多个项目的颜色和选择项目

前言

变更v-for遍历的列表的颜色看似简单，但是细细思考，你会发现一个问题，让列表中的某一个进行变换是很简单的，但是如何对根据自己选择的多个进行变更颜色呢？为了实现这个目的，你得确定选择的是哪一项，如果选择多个，应该有哪些下标的列表是需要变色的等等需要考虑的因素。

本文章主要以实现变更颜色为主，也有涉及一些选择选中的项目代码

实现单个列表进行变色

单个的变色很简单

// 颜色样式
<style>
 .red{
 color: red;
 }
</style>

<!-- html -->
<div id="app">
 <ul>
 // v-for列表
 <li v-for="item,index in list" :class="{red: changeColor == index}" @click="change(index)">{{item}}</li>
 </ul>
</div>

<!-- JavaScript -->
<script>
 const app = new Vue({
 el: '#app',
 data: {
 list: ['项目1','项目2','项目3','项目4'],
 changeColor: -1
 },
 methods: {
 // 变更颜色方法
 change (index) {
 this.changeColor=index;
 }
 }
 })
</script>

以上代码，也就是当属性变量和下标相等的时候会将对应的列表项变更颜色。
但是也只有一项。

多个项目进行变色

这个方式是我想出来的一个方法，当我说出来会发现，原来可以简单的实现这个要求

// 颜色样式
<style>
 .red{
 color: red;
 }
</style>

<!-- html -->
<div id="app">
 <ul>
 // v-for列表
 <li v-for="item,index in list" :class="{red: changeColor[index].id == index}" @click="change(index)">{{item}}</li>
 </ul>
</div>

<!-- JavaScript -->
<script>
 const app = new Vue({
 el: '#app',
 data: {
 list: [], // list集合
 changeColor: [] // 变更颜色
 chooseList: [] // 选择的列表
 },
 methods: {
 // 变更颜色方法
 change (index) {
                 // 判断是否有相同的数据，有移除，无添加 如果为0，被选中的列表没有选择的数据
                let sameIndex = 0;
                // 判断list有无数据,然后增添选择的数据
                if (this.list.length == 0) {
                // 将数据添加到被选择的列表
                    this.list.push(this.chooseList[index])
                    // 变更选择的项目颜色
                    this.changeChooseColor[index].id = index;
                } else {
                    // 遍历list判断是否有相同的数据
                    for (let i in this.list) {
                        if(this.list[i] == this.chooseList[index]) {
                        // 移除已有并点击的项目
                            this.list.splice(i,1);
                            sameIndex  =1;
                            // 取消变更选中的颜色
                            this.changeChooseColor[index].id = -1;
                        }
                    }
                    // 无数据添加
                    if (sameIndex == 0) {
                    // 将数据添加到被选择的列表
                        this.list.push(this.chooseList[index]);
                        // 变更选择的项目颜色
                        this.changeChooseColor[index].id = index;

                    }
 },
 // 获取list集合
 getList() {
 	// 通过后端获取list集合信息或者自定义list
 	this.list.push({name: "项目1"});
 	this.list.push({name: "项目2"});
 	this.list.push({name: "项目3"});
 	this.list.push({name: "项目4"});
 	// 遍历list，根据list长度生成对应的改变颜色的集合
 	for (int i in list) {
 	// 每一项都设定值为-1，让初始和项目列表下标不相等
 	this.changeColor.push({id:-1})
 	}
 }
 },
 created() {
 // 加载页面获取list集合并生成改变颜色的集合
 	this.getList();
 }
 })
</script>

截图

以下为本人当前项目实现该功能的截图

选择单个

选择多个

取消选择其中的一项

结语

以上，为本人实现的变更v-for里多个列表项目的颜色