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/

Answer 1

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

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

Demo