使用vue实现给当前节点添加样式给兄弟节点移除样式


我们知道使用jquery很容易做到给当前样式添加指定class,给兄弟节点移除class,但是使用vue该如何做呢?
其实也非常简单,例如给点击id为week的div,为其添加样式c_active:
<div v-for= "(item,index) in data" :key = "index">
  <div  :class="{c_active: index == active}" @click="changeClass(index)"  id="week">{{item}}</div>

</div>

new Vue({

  data: {
    week: ['星期一','星期二','星期三,'星期四','星期五','星期六','星期日'],

    active: 0//默认第一个元素添加c_active

  },

  methods: {
    changeClass(index) {
      this.active = index; 
    }
  }

})

<style>

.c_active{

  color:orangered;

}

</style>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM