Question

    <template>
    <div>
     <div v-if="context=='home'"  v-for="item in filteredItems"  @mouseover="activate" @mouseout="deactivate" @click="openlink" class="item" :data-link="item.link" v-bind:class="item.class">

     <div v-else  v-for="item in filteredItems"  @mouseover="activate" @mouseout="deactivate" @click="openlink" :data-link="item.link">

我有一个vuejs组件，在模板中我要换出 v-bind：class =＆＃34; item.class＆＃34; ，只有在上下文为home时才添加它

  <work context="home"></work>

上下文通过prop传递。

知道如何实现这个目标吗？

谢谢，

Answer 1

:class="{'class_name': 'your_condition'}"

所以在你的情况下

:class="{'class_name': context === 'home'}"

并确保context的值为小写以使其工作。或者在上下文变量上使用toLowerCase（）函数。

:class="{'class_name': context.toLowerCase() === 'home'}"

<强> [增订] 您可以创建一个类似下面的方法来实现此功能。我用以下方法创建了一个jsBin。在这里查看substitute class name

getClass: function() {
  return this.context === 'home' ? this.item.class : '';
}

条件模板逻辑Vuejs

1 个答案: