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>

:class=”{red:index==indexPrev}” 其中indexPrev 为class 作用到的元素的索引。

Logo

前往低代码交流专区

更多推荐