vue.js - Vue.js - 通过 prop 对组件进行类绑定

Question

我正在尝试通过 prop 将color属性传递给组件，该属性将确定组件的背景颜色。属性的选择color是“红色”和“蓝色”。

实际组件设置如下：

Vue.component('greeting', {
    props: ['color'],
    template: '<div v-bind:class="{'add-red': color === 'red', 'add-blue': color === 'blue'}" class="box"></div>'
});

实际color传入如下：

<component color='red' :is='currentComponent'></component>

但我似乎无法让类绑定在我的 jsfiddle 中工作。

https://jsfiddle.net/cckLd9te/3217/

标签： vue.js

Answer 1

'您的模板在单引号和双引号之间混合"。你应该使用转义字符

Vue.component('greeting', {
    props: ['color'],
  template: '<div v-bind:class="{\'add-red\': color === \'red\', \'add-blue\': color === \'blue\'}" class="box"></div>'
});

演示