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'爲真時纔會應用。