Ausführliche Erklärung der Stilbindung in Vue

Stilbindung in Vue wird häufig in Webseiten verwendet und ist mit jq nicht schwer zu implementieren. Diesmal verwenden wir ein Beispiel, um die Wissenspunkte der CSS-Stilbindung in Vue zu überwinden.

Effekt:

Auf der Seite befindet sich der Text „Hallo“. Wenn Sie auf „Hallo“ klicken, wird die Textfarbe rot, und wenn Sie erneut klicken, ändert sich die Textfarbe wird wieder schwarz. Dann muss die Farbänderung über den CSS-Stil gesteuert werden.

Methode 1:

<div id="root" @click=&#39;handleClick&#39; :class=&#39;{actived:isActived}&#39;>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                isActived:false,
            },
            
            methods:{
                handleClick:function(){
                     this.isActived=!this.isActived;
                }
            }
            
        })
    </script>
    <style>
        .actived{
            color: red;
        }
    </style>

Erklären Sie diese Schreibmethode: class='{actived:isActived}', wenn isActived falsch ist, dann class='', wenn isActived ist true, dann class='actived'.

Also haben wir in den Daten den Standardwert „false“ definiert. Wenn darauf geklickt wird, wird die Methode „handleClick“ ausgelöst, wodurch „this.isActived“ dem negierten Wert entspricht.

Methode 2:

<div id="root" @click=&#39;handleClick&#39; :class=&#39;[isActived]&#39;>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                isActived:&#39;&#39;,
            },
            
            methods:{
                handleClick:function(){
                     this.isActived=this.isActived===&#39;&#39;?&#39;actived&#39;:&#39;&#39;;
                }
            }
            
        })
    </script>
     <style>
        .actived{
            color: red;
        }
    </style>

In dieser Methode geben wir ein Array an und übergeben einen leeren Standardwert isActived im Array, wenn mit der Maus geklickt wird. Die Methode handleClick wird ausgelöst, wobei wir den ternären Operator verwenden, um den Wert von this.isActived abzurufen.

Derselbe Effekt wie beim ternären Operator ist die Verwendung des if-Urteils:

 if(this.isActived==''){
       this.isActived='actived';
     }else{
       this.isActived='';
 }

Methode 3:

Im Obigen verwenden wir die Klasse direkt Wie implementiert man den Stil in HTML, um den Effekt zu erzielen? Der Code ist nicht schwierig. Wir können den zweiten Effekt nachahmen:

rrree

Nachdem der Seitentext angeklickt wurde, wird die Funktion handleClick ausgelöst. Wir verwenden immer noch drei. Der Metaoperator bestimmt und erhält den Wert von this.styleObj.color, um den Effekt zu erzielen.

Verwandte Empfehlungen: „Erweitertes Javascript-Tutorial“

Das Obige ist die Erklärung der Stilbindung in Vue. Es gibt viele Möglichkeiten, den gleichen Effekt zu erzielen, Freunde, lasst es uns wissen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Stilbindung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!