VueJS 仅当数据变量为真时才绑定道具

Question

如何仅在变量设置为 true 时绑定 属性？

<template>
    <v-list-tile :class="{[$color]: isItemSelected, [$primaryText]: isItemSelected}" :href="route">
        <v-list-tile-action>
            <v-icon :color="$primaryIcon">{{ icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
            <v-list-tile-title>{{ title }}</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</template>

<script>
    export default {
        name: 'list-tile-text-icon',
        props: ['icon', 'title', 'route'],
        data: () => ({
            isItemSelected: false
        }),
        created() {
            this.isItemSelected = window.location.href === this.route;
        }
    }
</script>

在第 4 行，只有当 isItemSelected 变量等于 true.

时，我才需要绑定到 :color="$primaryColor"

Answer 1

v-bind中使用的值是JavaScript表达式，因此您可以使用Conditional (ternary) operator:

<v-icon :color="isItemSelected ? $primaryIcon : null">

注意：我称它为v-bind，因为:只是shorthand到v-bind。 IE。 :color="" 等同于 v-bind:color=""

Answer 2

Vue class and style binding doc

这是关于vueclass和样式绑定的官方文档，

详情：

<v-list-title :class="{someClassYouDefine: isItemSelected}"> </v-list-title>

然后写你想要的样式

<style>
   .someClassYouDefine {
      color: $primaryColor;
   }
</style>