VUE3頁(yè)面div如何點(diǎn)擊改變樣式

更新時(shí)間：2024年03月04日 09:46:21 作者：左直拳

這篇文章主要介紹了VUE3頁(yè)面div如何點(diǎn)擊改變樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3頁(yè)面div點(diǎn)擊改變樣式

如題目所示。

用上VUE之后，前后端分離，組件式開發(fā)，代碼復(fù)用、獨(dú)立性和隔離性都挺好，可維護(hù)性得以提高。

相比之下，以前用jQuery，代碼實(shí)在太多了。

不過，vue有個(gè)地方不大好，就是控制頁(yè)面元素的樣式比較死板?，F(xiàn)在用vue和react的話，基本都會(huì)選用一種UI框架，比如element plus，或者ant design等。

UI框架通常比較強(qiáng)大，效果也很煊，比自己動(dòng)手寫強(qiáng)多了。

但如果有些自己還想額外加一些效果的話，就會(huì)發(fā)現(xiàn)困難重重，不像以前用jquery那么好控制。

比如，我想羅列 4 個(gè)div，代表4種分類。

點(diǎn)擊其中一個(gè)，就加上置亮的邊框；再點(diǎn)擊，取消置亮。

在ant design vue里找來找去，沒有這種控件，只好自己寫。

代碼如下：

在這里插入圖片描述

<template>
  <div class="c-container">
    <div
      v-for="(item, index) in items"
      :key="index"
      :class="
        isActive === index
          ? 'c-item c-item-selected'
          : 'c-item c-item-noselected'
      "
      :style="`background:url(各種圖標(biāo)) no-repeat center 15px;`"
      @click="changeCategory(item, index)"
    >
      <div class="c-text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted, ref } from "vue";
import { getCategory } from "@/components/Category";
import * as tools from "@/utils";

export default defineComponent({
  setup(props, context) {
    let isActive = ref(-1);

    const changeCategory = (item, index) => {
      if (isActive.value !== index) {//如果點(diǎn)擊的div沒有處于置亮狀態(tài)，則置亮
        isActive.value = index;
      } else {//否則取消置亮
        isActive.value = -1;
      }
    };

    const state = reactive({
      items: [],
    });
    onMounted(async () => {
        state.items = 。。。;//獲取分類數(shù)據(jù)
    });
    
    return {
      ...toRefs(state),
      changeCategory,
      isActive,
    };
  },
});
</script>

<style scoped>
.c-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  min-width: 390px;
}
.c-item {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.c-item-noselected {
  border: solid 1px #eee;
}
.c-item-selected {
  border: solid 1px #1270d6;
}
.c-text {
  margin-top: 60px;
}
</style>

代碼中主要用了isActive這個(gè)響應(yīng)式變量。

重點(diǎn)代碼為

   :class="
     isActive === index
       ? 'c-item c-item-selected'
       : 'c-item c-item-noselected'
   "

  let isActive = ref(-1);

  const changeCategory = (item, index) => {
    if (isActive.value !== index) {//如果點(diǎn)擊的div沒有處于置亮狀態(tài)，則置亮
      isActive.value = index;
    } else {//否則取消置亮
      isActive.value = -1;
    }
  };

注意這個(gè)isActive，忽而isActive.value，忽而 isActive === index，讓人摸不著頭腦。

這是VUE的語(yǔ)法，沒辦法。