vue实现列表多选并存入选入的值

一般来说项目的数据结构都是这样的

 1.在页面上渲染出来并且 并且加上动态样式处理

 2.每次点击进行循环判断 有就添加到数组fid没有则删除

3.在进行样式判断如果循环展示的时候fid数组里面有当前列表的id则变成红色

效果图如下

4.放一下完整的代码  

<template>
    <view>
        <view v-for="(item,index) in arrar" @click="but(item)"  :class="{'union' :getUnionStatus(item)}" >  
            {{item.name}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                ind:[],
                arrar: [{
                        name: "张三",
                        id: '1'
                    },
                    {
                        name: "罗布特*刘能",
                        id: '2'
                    },
                    {
                        name: "尼古拉斯*赵四",
                        id: '3'
                    },
                ]
            }
        },
        onLoad() {

        },
        methods: {
            but(item) {
                let fid = []
                let count = -1;
                this.ind.forEach((res, ind) => {
                    if (res == item) {
                        count = ind
                    }
                })
                // 判断如果有就删除没有就添加
                if (count !== -1) {
                    this.ind.splice(count, 1);
                } else {
                    this.ind.push(item)
                }
                // 循环拿出需要传递的用户id
                for (let i = 0; i < this.ind.length; i++) {
                    fid.push(this.ind[i].id)
                }
                console.log(this.ind)
            },
            //处理动态样式
            getUnionStatus(item) {
                return this.ind.some(e => {
                    return e.id == item.id
                })
            },
        }
    }
</script>

<style>
 .union{
     color: red;
 }
</style>