条件変更のためのVue変更スタイル

Question

私はv-forを持っており、与えられたデータの戻りに応じてスタイルを変更する必要があります。あなたが動的に次のようにクラスを変更するには、V-バインドを経由してdynamic class bindingを使用することができます

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

Answer 1

：それは次のようである角度で

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

    </ul> 
</div> 

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

をので、上記のコードでは、 myClassは、条件cervejaria.name == 'foo'がtrueの場合にのみ適用されます。