如何在vue.js 2上添加類？

Question

我的部分是這樣的：

<template> 
    <span class="rating"> 
     ... 
    </span> 
</template> 
<script> 
    export default{ 
     props: { 
      'star': null 
     }, 
     created: function() { 
      if(this.star != null) 
       $(".rating").addClass('test'); 
     } 
    } 
</script> 

當頁面重載第一，我要檢查道具明星。如果道具明星不等於空，然後添加類測試

我嘗試像我上面的代碼，但它不工作

是否有任何人誰可以幫我？

Answer 1

你不需要爲此使用jQuery。

<template> 
    <span :class='{"rating": star !== null}'> 
     ... 
    </span> 
</template> 
<script> 
    export default{ 
     props: { 
      'star': null 
     } 
    } 
</script> 

:class是屬性綁定語法，你可以說，這是現在能夠訪問你的vue-component的變量。

{'rating': star !== null}這個簡單的布爾表達式將確保是否需要添加.rating。

你也可以這樣做：

:class='{"rating": !!star}' 

如果表達式的計算結果爲truthy，你會得到應用的類。