VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class)

更新時間：2023年11月16日 09:38:36 作者：前端李小白

這篇文章主要介紹了VUE如何實現(xiàn)點擊文字添加顏色(動態(tài)修改class),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue點擊文字添加顏色(動態(tài)修改class)

實現(xiàn)的原理很簡單，只需要動態(tài)綁定一個class就可以了，現(xiàn)在分別列出三種情況

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里面的對象添加一個屬性，全部設(shè)置為false，然后點擊的時候設(shè)置為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>

效果如下，點擊‘總的’話，部分會全部不變，點擊‘部分’，全部會不變