VUE改变风格在有条件

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

可以使用dynamic class binding经由V型结合动态改变类如下：因此，在上面的代码

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

， myClass只有在条件cervejaria.name == 'foo'为真时才会应用。