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> 

ページのリロードは最初、私は小道具の星を確認したいときに。 nullにプロップスターが等しくない場合には、クラスのテスト

を追加私は上記の私のコードのようにしてみてください、それは動作しません

は私を助けることができる人はいますか？

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を追加する必要があるかどうかを保証します。

あなたはまた、のような何かを行うことができます：式がtruthyに評価された場合

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

を、あなたが適用されるクラスを取得します。