zoukankan      html  css  js  c++  java
  • vue中类似于jq中的ele.addClass('class').siblings().removeClass('class')效果

    vue中要实现当前元素添加类同级兄弟元素移除类的效果,可使用v-bind:class;

    v-bind:class支持变量,当变量发生变化的时候,class将发生变化;

    实现方法举例:

    <template>

      <div>

        <ul>

          <li v-for="(item,index) in liList" :key="index" :class="{active:index==current}" @click="addClass(index)">{{item.purpose}}</li>

        </ul>

      </div>

    </template>

    <script>
    export default {
      data(){
        return {
          liList:[
            {purpose:'洗车'},
            {purpose:'美容'},
            {purpose:'养护'},
            {purpose:'换件'}
          ],
          current:1,//默认哪个有类名
     
        }
      },
      methods:{
        addClass(index){
          this.current=index
        }
      }
    }
  • 相关阅读:
    PHP0002:PHP基础1
    NodeJS_0001:关于install的方式
    JN_0018:运行窗口不显示
    事务、事务操作、事务隔离级别
    MySQL 常见的两种存储引擎
    8:二叉树的下一个节点
    链表
    文件压缩
    MapReduce--Shuffle原理
    volatile关键字
  • 原文地址:https://www.cnblogs.com/kangkang1207/p/10675621.html
Copyright © 2011-2022 走看看