Vue.js中如何基于动态变量实现动态CSS类绑定？

你的问题出在动态属性访问的语法错误——原来的写法把outofstock.item_当成字符串拼接，并没有实际访问到outofstock对象里的item_1/item_2这类动态属性。下面是几种可行的解决方案：

方案1：修正三元表达式的属性访问语法 #

直接用对象的括号访问符来获取动态属性，这是最直接的修改方式：

<template>
<ul>
    <li v-for="item in items" :key="item.id">
        <div :class="outofstock['item_' + item.id] ? 'bg-green-500' : 'bg-red-500'">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
export default {
    data () {
        return {
            items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'}],
            outofstock: {item_1: false, item_2: true, item_3: false}
        }
    }
}
</script>

这里outofstock['item_' + item.id]会根据当前item.id动态拼接属性名，正确获取到outofstock里对应的值，再通过三元表达式绑定对应的类。

方案2：使用Vue的对象语法绑定类 #

如果需要绑定多个类或者想让逻辑更清晰，可以用对象语法：

<template>
<ul>
    <li v-for="item in items" :key="item.id">
        <div 
            :class="{
                'bg-green-500': outofstock['item_' + item.id],
                'bg-red-500': !outofstock['item_' + item.id]
            }"
        >
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

对象语法的规则是：键是类名，值是布尔值，值为true时对应的类会被添加。

方案3：提取为方法（推荐，代码更易维护） #

如果逻辑复杂或者需要复用，可以把类的判断逻辑提取到方法里：

<template>
<ul>
    <li v-for="item in items" :key="item.id">
        <div :class="getStockClass(item.id)">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
export default {
    data () {
        return {
            items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'}],
            outofstock: {item_1: false, item_2: true, item_3: false}
        }
    },
    methods: {
        getStockClass(itemId) {
            return this.outofstock[`item_${itemId}`] ? 'bg-green-500' : 'bg-red-500'
        }
    }
}
</script>

关键注意点 #

• v-for必须添加:key，这是Vue的性能优化要求，避免渲染错误。
• 动态属性访问只能用obj['key']的形式，不能用obj.key——因为.后面的是固定属性名，无法解析动态拼接的字符串。

内容的提问来源于stack exchange，提问作者StEvE