Vue v-for 时，单个元素class的控制

最新推荐文章于 2025-06-11 19:50:48 发布

原创最新推荐文章于 2025-06-11 19:50:48 发布 · 6.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #class #v-for

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个Vue.js示例，展示了如何使用v-for循环结合动态class改变列表项的颜色，并通过点击事件更新class绑定的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue v-for 时，单个元素class的控制

只要一句表达式，加一个控制控制变量

<template>

 <ul>
 <li v-for="(item,index) in arr" :class="{red:index==indexPrev}"         
 v-on:click="changeColor(index)">{{item}}</li></ul>   
</template>
<script>
export default {
      data(){
        return {
            arr:['0','1','3'],
            indexPrev:1
        }
      },
    methods:{ 
        changeColor(index){this.indexPrev=index}
        }
}
</script>
<style>
.red{color:red}
</style>