Vue中如何将数组元素对应的值传入v-bind:style？

你的问题核心是：entry[2] 的值是字符串 "pronoun"，而不是指向你 data 里定义的 pronoun 变量。Vue 会直接把这个字符串当作颜色值处理，但 "pronoun" 不是合法的 CSS 颜色，所以样式不生效；而直接写 pronoun 时，Vue 会读取你 data 里的变量值 "red"，这是合法颜色，所以能正常生效。

下面是两种可行的解决办法：

方法一：用映射对象关联类型与颜色（推荐） #

把不同类型对应的颜色整理成一个对象，通过类型字符串去取值，扩展性更强：

1. 修改 Vue 导出代码里的 data 部分：

export default {
    props: {
        id: String,
    },
    data() {
        const data = db[this.id]

        return {
            data,
            // 定义类型到颜色的映射
            typeColors: {
                pronoun: "red"
                // 以后可以加其他类型，比如 verb: "blue" 之类的
            }
        }
    },
}

2. 修改模板里的样式绑定：

<div v-for="entry in translation">
    <p v-bind:style="{ backgroundColor: typeColors[entry[2]] }">{{entry[0]}}</p>
</div>

方法二：直接用条件判断（适合简单场景） #

如果只有 pronoun 这一种需要设置颜色的类型，也可以直接用三元表达式判断：

<div v-for="entry in translation">
    <p v-bind:style="{ backgroundColor: entry[2] === 'pronoun' ? pronoun : '' }">{{entry[0]}}</p>
</div>

这样修改后，entry[2] 对应的类型就能正确映射到你定义的颜色值，样式就能正常生效了。

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