vue.js - 根据卡值更改 v-card 背景颜色

Question

我目前正在处理 v 行 v 卡，并且正在努力根据卡的值更改某张卡的背景颜色。我在这里设置它，如果卡片的值等于当前值(由用户输入)，那么卡片的背景应该是白色，#FFFFFF，否则卡片背景应该变黑，#000000。这是我的设置，但由于某种原因它不起作用。有谁知道我做错了什么？

<v-row>
    <v-card
      v-for="values in cards"
      :key="value"
      color="currVal == value ? '#FFFFFF' : '#000000'"
      :class="'ma-2 pa-3'"
      outlined
      tile
    >{{ value }}</v-card>
</v-row>

Answer 1

由于你的颜色是一个javascript表达式，你需要v-bind color参数:

<v-row>
    <v-card
      v-for="value in cards"
      :key="value"
      :color="currVal === value ? '#FFFFFF' : '#000000'"
      class="ma-2 pa-3"
      outlined
      tile
    >{{ value }}</v-card>
</v-row>

次要:因为 class 只是一个字符串，不需要 v-bind。