vue.js 如何更改每个数字的背景颜色？

2wnc66cl 于 2023-03-19 发布在 Vue.js

关注(0)|答案(1)|浏览(219)

我正在处理一个简单的项目，但有一个问题：

<script setup>
import { ref } from "vue";

const isActive = ref(false);
const rates = ref([1, 2, 3, 4, 5]);

const selectPick = () => {
  isActive.value = !isActive.value;
};
</script>

<template>
  <main>
    <div v-show="!isVisible" class="card-container">
      <div class="content-container">
      ...
        <ul>
          <li
            v-for="rate in rates"
            :key="rate"
            @click="selectPick"
            class="rating"
            :class="{ active: isActive }"
          >
            {{ rate }}
          </li>
        </ul>

        <button class="btn">Submit</button>
      </div>
    </div>
  </main>
</template>

我的目标：当我点击任何数字相关按钮的背景色应该变成橙子，但如果我点击另一个，它必须返回旧的油漆。
问题：当我单击任何数字时，所有数字的背景色都返回橙子。

vue.js

来源：https://stackoverflow.com/questions/75718846/how-can-i-change-each-numbers-background-color

1条答案

按热度按时间

0x6upsns1#

定义ref变量，并在@click事件中更改其值，设置单击的btn值。然后将btn值与变量进行比较以进行自定义样式。
试试这个。

<template>
  <main>
    <div v-show="!isVisible" class="card-container">
      <div class="content-container">
      ...
        <ul>
          <li
            v-for="rate in rates"
            :key="rate"
            @click="activeRef = rate"
            class="rating"
            :class="{ active: activeRef === rate }"
          >
            {{ rate }}
          </li>
        </ul>

        <button class="btn">Submit</button>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";

const activeRef = ref(null);
const rates = ref([1, 2, 3, 4, 5]);
</script>

主要变化：

const activeRef = ref(null);

还有

@click="activeRef = rate"
...
:class="{ active: activeRef === rate }"

赞(0）回复(0）举报 2023-03-19

我来回答

vue.js 如何更改每个数字的背景颜色？

1条答案

相关问题

热门标签

最新问答