使用vue動態更改CSS類js

Question

我一直在使用vue大約一個月，但有一件事情我還沒有真正做好。

所以在樹枝，我們可以做這樣的事情

<th class=" 
    {% if condition %} 
     class1 
    {% else %}  
     class2 
    {% end if %} 
"> 

<th class="sorting_asc" v-for="col in columns" v-if="col.label == sortKey"> 
<th class="sorting" v-for="col in columns" v-else> 

所以我的第一個問題是我不能似乎能夠實現在Vue公司的js類似的東西。其次，我寫了'v-if =「col.label == sortKey」'，我甚至可以訪問html塊外部的car col.label（循環外部）。謝謝你在先進

Answer 1

你可以用vuejs以下做dynamic styling：

<th v-bind:class="{'class1': condition, 'class2': !condition}"> 

從技術文檔：

<div v-bind:class="{ active: isActive }"></div> 

以上語法意味着活動類的存在將通過感實性確定的數據屬性isActive。你可以把簡單的條件返回布爾代替isActive