一个vue for循环中改变 v-bind:class 问题

Question

我for循环了一个列表

需要没有点击指定类目的时候，白色列表加一个class，点击指定类目之后，白色列表removeclass，下面灰色部分加一个class，点回去返回以此类推，求解答

Answer 1

<template>
     <p v-for="(item) in list" :key="item.id" @click="onClick(item.id)" :class="{active: item.id===selected}">
         <span>{{item.name}}</span>
     </p>
</template>

<script>
export default {
    data() {
        return {
            selected: 0,
            list: [
                {name: '请', id: 1},
                {name: '订', id: 2},
                {name: '车', id: 3},
                {name: '租', id: 4}
            ]
        };
    },
    methods: {
        onClick(id) {
            this.selected = id;
        }
    }
};
</script>

Answer 2

有很多种方法，比如你在拿到这个循环列表，假如数据如下：

[{id:1, price: 40}, {id:2, price: 40}]

你把它数组操作后[map()]得到这样的json数组：

[{id:1, price: 40, active: false}, {id:2, price: 40,  active: false}]

然后这个元素@click绑定方法：

this.active = true;

这个元素加个指令：

:class="{'active': item.active}"

Answer 3

首先遍历数组 给每一项添加一个isclick属性 点击某项的时候再次遍历数组 把全部isclick设为false 当前点击的为true 然后:class="{'active': item.isclick}"