时间戳

首页 > 解决方案 > 根据卡片值更改 v-card 背景颜色

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

问题描述

我目前正在使用 v-row 的 v-cards，并且正在努力根据卡的值更改某张卡的背景颜色。我在这里设置了，如果卡片的值等于当前值（由用户输入），那么卡片的背景应该是白色的#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>

标签： vue.js

解决方案

由于您的颜色是 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>

Minor：因为class只是一个字符串，所以不需要v-bind.

推荐阅读