vue中v-for循环选中点击的元素并对该元素添加样式

相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化

解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式

<template>
    <view>
        <view v-for="(item,index) in items" :class="isactive == index ? 'addclass' : '' " @click='onclick(index)' class="fruits">
            <text>{{item.name}}</text>
            <text>{{item.price}}</text>

        </view>
    </view>
</template>

<script>
    export default {

        data() {
            return {

                items: [{
                        name: '苹果',
                        price: '5$'
                    },
                    {
                        name: '香蕉',
                        price: "3$"
                    },
                    {
                        name: '西瓜',
                        price: '4$'
                    },
                    {
                        name: '桃子',
                        price: '3$'
                    },
                    {
                        name: '草莓',
                        price: "6$"
                    },
                    {
                        name: '樱桃',
                        price: '10$'
                    },

                ],
                isactive: false

            }

        },
        methods: {
            onclick(index) {
                console.log(index)
                //将点击的元素的索引赋值给bian变量

                this.isactive = index
            }

        }
    }
</script>

<style>
    
    .fruits {
        margin: 50upx;
    }
    
    .addclass {
        color: red;
    }
</style>