js动态修改class属性

 
在前端界面，希望通过点击修改class属性，实现代码如下：
 
$(function(){
    $("#selected li").click(function() {
        $(this).siblings('li').removeClass('active');  // 删除其他li元素的样式
        $(this).addClass('active');                            // 添加当前元素的样式
    });
});
 
html代码如下：
 
<ul class="nav nav-sidebar" id = 'selected'>
    <li class ="active">
        <a href="${pageContext.request.contextPath}/describe/result">基本信息</a>
    </li>
    <li >
        <a   onclick="getDescribe()">成绩查询</a>
    </li>
    <li >
        <a href="${pageContext.request.contextPath}/describe/result">测试查询</a>
    </li>
    <li >
        <a data-toggle="modal" data-target="#passwordCorrect">修改密码</a>
    </li>
    <li >
            <a href="${pageContext.request.contextPath}/signin/signInSuccess" onclick="login()">退出登录</a>
    </li>
    <li >
        <a href="${pageContext.request.contextPath}/signin/signInSuccess" >退出登录</a>
    </li>
</ul>

jquery可以使用attr()或prop()方法修改类名，javascript可以修改对象的className属性，
 
$("#test").attr(“class”,“blue”);
 $("#test").prop(“class”,“blue”);
 document.getElementById(“test”).className = “blue”;

问题描述
 
 
 
通过v-for指令，按照index动态生成class
 
 
例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中，1,2,3,4,5为循环遍历的下标。
 
实现原理
 
通过methods将index传入，并自定义返回值类型。
 
注意: 此处无法使用computed实现！！！
 
原因是computed是无法获取到当前遍历的index值，可以自己动手试一试。
 
源码实现
 
<template>
  <div class="game">
    <div class="game_item" v-for="(item,index) in gameList" :class="generateClassName(index)" :key="index">
        {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'game',
  data () {
    return {
      gameList: Array(40).fill(1)
    }
  },
  methods: {
    generateClassName (index) {
      // 调用方法，动态生成index
      return `game_item-${index}`
    }
  }
}
</script>

实现的原理很简单，只需要动态绑定一个class就可以了，现在分别列出三种情况
 
1.点击文字颜色改变，再次点击，点击的颜色改变，之前的颜色变回原来的颜色
 
代码如下：
 
<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:colorIndex===index}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {},
  methods: {
    changeColor(item, index) {
      this.colorIndex = index;
    }
  }
};
</script>

<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>
 
效果如下，当我点击其中某一个文字的时候，字体的颜色就改变了
 
 
2.如果需要点击多个变颜色的话，再次点击取消的话，我是这样做的，给data里面的对象添加一个属性，全部设置为false，然后点击的时候设置为true，代码如下：
 
<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:item.active}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {
      this.addActive()
  },
  methods: {
      /*给List的每一个对象添加active属性，需要用到this.$set（'对象','键值','value'） */
      addActive(){
        this.List.forEach(item=>{
            this.$set(item,'active',false)
        })
      },
    changeColor(item, index) {
      if(!item.active){
         item.active = true
      } else {
          item.active = false
      }
    }
  }
};
</script>

<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>
 
效果如下：点击多个文字可以改变样式，再次点击可以取消
 
 3.有时候我们要是有个‘总的’，那个点击‘总的’，就不能有部分的存在了，点击部分就不能有‘总的’存在，代码如下：
 
<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:item.active}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {
    this.addActive();
  },
  methods: {
    /*给List的每一个对象添加active属性，需要用到this.$set（'对象','键值','value'） */
    addActive() {
      this.List.forEach(item => {
        this.$set(item, "active", false);
      });
    },
    changeColor(item, index) {
      if (index === 0) {
        this.List.forEach(item => {
          item.active = false;
        });
      } else {
        this.List[0].active = false;
      }
      if (!item.active) {
        item.active = true;
      } else {
        item.active = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>
 
效果如下，点击‘总的’话，部分会全部不变，点击‘部分’，全部会不变