vue实现active点击切换样式

原创于 2023-11-09 10:40:40 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用v-for循环和点击事件动态改变元素的样式，当用户点击时，通过`currentSort`变量绑定不同样式的CSS类。

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

      <div :class="['but',{'active' :currentSort==index}]"
 v-for="(item,index) in hs" :key="item.id"  @click="dj(index)">
 
 
 data() {
    return {
       currentSort:'',
    };
  },
 
methods: {
    dj(index){
    
      this.currentSort  = index 
        console.log( this.currentSort);
    }
}
 
 
<style>
.active{
  border: 1px solid blue !important;//点击后显示的颜色
}
 
.but{
  border: 1px solid rgb(243,243,243);//默认显示的颜色
}
 
 
</style>