Wie Klasse auf vue.js 2 hinzufügen?

Question

Meine Komponente ist wie folgt:

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

Wenn die Seite neu laden zuerst, ich stütze Stern überprüfen möchten. Wenn die Stütze Sterne nicht gleich null, dann fügen Sie Klassenarbeit

Ich mag meinen Code versuchen, oben, aber es funktioniert nicht

Gibt es jemanden, der mir helfen kann?

Answer 1

Sie müssen jQuery dafür nicht verwenden.

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

:class Eigenschaft Bindung Syntax ist, kann man sagen, dass es jetzt in der Lage ist, die Variablen in Ihrem vue-component zuzugreifen.

{'rating': star !== null} Dieser einfache boolesche Ausdruck stellt sicher, ob .rating hinzugefügt werden muss oder nicht.

Sie können auch wie etwas tun:

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

Wenn der Ausdruck auf einem truthy wertet, werden Sie die Klasse angewendet bekommen.