牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2017-08-22 投稿人: 浏览次数:804

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

<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 作用到的元素的索引。

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。