Question

我有一个v-for，我需要根据给定数据的返回来改变样式。

<div id="beerApp">
  <ul>
     <li v-for="cervejaria in cervejarias">   
        <span class="CHANGE Conditionally IF cervejaria.name == 'foo' ">{{cervejaria.name}}</span>
    </li>

  </ul>
</div>

在角度中，它如下：

ng-class="cervejaria.name == 'Foo' ? 'task-cat blue lighten-5 black-text' : 'task-cat green'"

Answer 1

您可以通过v-bind使用dynamic class binding动态更改类，如下所示：

<li v-for="cervejaria in cervejarias">   
   <span v-bind:class="{'myClass' : cervejaria.name == 'foo'}">         {{cervejaria.name}}</span>
</li>

因此，在上面的代码中，myClass仅在条件cervejaria.name == 'foo'为真时才会应用。

Vue改变风格为有条件

1 个答案: