vue3选中后颜色赋值切换

vue3选中后颜色赋值切换

html

定义html内容:class="sideIndex == index ? 'active' : ''"

    <div
      v-for="(res, index) in resData"
      :key="index"
      class="lside-list"
      :class="sideIndex == index ? 'active' : ''"
      @click="getTopic(index)">
      <div v-if="res.identity" @click="method.skip(res.path)">
        {{ res.title }}
      </div>
    </div>

css

点击后赋值的颜色

  .lside-list.active {
    color: #fff;
    background-color: #0ea5e9;
  }

script

点击方法后根据index值进行颜色赋值

/**
 * 选中后变色并且效果不消失
 */
export const sideIndex = ref(0)

import { sideIndex } from '@/hooks/data'
function getTopic(index: number) {
  sideIndex.value = index
}
onMounted(async () => {
  getTopic(sideIndex.value)
})