如何将 Vuetify 颜色变量与三元运算符一起使用答案

【问题标题】：How to use Vuetify color variables with ternary operator如何将 Vuetify 颜色变量与三元运算符一起使用
【发布时间】：2025-12-16 23:25:01
【问题描述】：

我正在尝试使用一些条件逻辑来更改按钮的背景颜色。我在这里找到了帖子，这些帖子表明您实际上可以使用三元运算符来更改颜色道具，但我没有找到喜欢使用主题选项中定义的颜色变量的用户的示例。如果不可能，有没有办法使用根定义的变量颜色选项？

            <v-btn class="mx-2"
                   fab
                   dark
                   color="{toggleEdit ? primary : secondary}"
                   @@click.stop="toggleEdit = !toggleEdit">
                <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
                <v-icon v-else dark>mdi-check</v-icon>
            </v-btn>

和

                <v-btn class="mx-2"
                   fab
                   dark
                   color="{toggleEdit ? 'var(--primary)' : 'var(--secondary)'}"
                   @@click.stop="toggleEdit = !toggleEdit">
                <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
                <v-icon v-else dark>mdi-check</v-icon>
            </v-btn>

【问题讨论】：

标签： javascript vue.js vuetify.js vuejs3

【解决方案1】：

您需要改用以下代码：

<v-btn class="mx-2"
               fab
               dark
               :color="toggleEdit ? 'var(--primary)': 'var(--secondary)'"
               @@click.stop="toggleEdit = !toggleEdit">
            <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
            <v-icon v-else dark>mdi-check</v-icon>
</v-btn>

【讨论】：

【解决方案2】：

你应该使用:color="{toggleEdit ? primary : secondary}"，否则它不会被处理并按原样传递。

根据此处的文档：https://vuetifyjs.com/en/api/v-btn/#props，color 道具应该是字符串而不是对象，所以我相信它实际上应该是：

:color="toggleEdit ? primary : secondary"

希望主要和次要在本地上下文中可用，颜色值作为字符串。

好的，如果 primary 或 secondary 变量在本地上下文中不可用（作为包装组件的数据中的属性），您可以通过以下方式访问默认主题颜色：

:color="toggleEdit ? $vuetify.theme.themes.light.primary : 
    this.$vuetify.theme.themes.light.secondary"

您可以根据自己的配置将light 与dark 互换。

如果您需要设置 CSS 变量，则必须在主题配置中启用属性 customProperties（查看下面的参考链接以了解如何操作）。之后，您可以访问您的颜色变量，如下所示：

:color="toggleEdit ? 'var(--v-primary-base)' : 'var(--v-secondary-base)'"

参考资料： https://vuetifyjs.com/en/features/theme/#customizing https://vuetifyjs.com/en/features/theme/#custom-properties

【讨论】：

使用字符串会触发警告并且似乎不起作用：[Vue 警告]：属性或方法“primary”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。
@Bradyboyy88 我已经更新了您的回复。

【解决方案3】：

请检查以下sn-p：

* {
  --primary: goldenrod;
  --secondary: seagreen;
}

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-btn class="mx-2"
               fab
               dark
               :color="toggleEdit ? 'var(--primary)': 'var(--secondary)'"
               @click.stop="toggleEdit = !toggleEdit">
            <v-icon v-if="toggleEdit" dark>mdi-pencil</v-icon>
            <v-icon v-else dark>mdi-check</v-icon>
          </v-btn>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() {
        return {
          toggleEdit: false
        }
      }
    })
  </script>
</body>
</html>

【讨论】：