转自 https://blog.csdn.net/katydids/article/details/83830002 

第一种是通过点击改变class 渐变显示 隐藏

:class="[fade?'show':'hidden']"

    
  .hidden{
    opacity: 0;
    visibility: hidden;
  }
  .show{
    opacity: 1;
    visibility: visible;
  }

div{
    transition: all .4s ease-in-out;
}

fade: false

点击改变值的布尔值

@click="mask  = !mask "

 

 

vue点击时动态改变样式

template中

<li :class="{ active:index==isActive }"  @click="changeValue(index)" 
v-for="( item , index ) in items" :key="item.name">{{item.CategoryName}}</li>

data中

isActive:false,

methods中

 changeValue(index, item){
       this.isActive=index;
        console.log(item);
  }