Explication détaillée de la liaison de style dans Vue

La liaison de style dans Vue est largement utilisée dans les pages Web. L'ajout de styles CSS et la suppression de styles CSS n'est pas difficile à implémenter avec jq. Cette fois, nous utilisons un exemple pour surmonter les points de connaissance de la liaison de style CSS dans Vue.

Effet :

Il y a un texte "bonjour" sur la page Lorsque vous cliquez sur bonjour, la couleur du texte devient rouge. Cliquez à nouveau et la couleur du texte devient noire. encore. . Ensuite, le changement de couleur doit être contrôlé via le style CSS.

Méthode 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>

Expliquez cette méthode d'écriture : class='{actived:isActived}', si isActived est faux, alors class='', si isActived Si c'est vrai, alors class='actived'.

Nous avons donc défini la valeur par défaut false dans data. Lorsque vous cliquez dessus, la méthode handleClick sera déclenchée, rendant this.isActived égal à la valeur annulée.

Méthode 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>

Dans cette méthode, nous donnons un tableau et passons une valeur vide par défaut isActived dans le tableau, lorsque l'on clique sur la souris, la méthode handleClick sera déclenchée, où nous utilisons l'opérateur ternaire pour obtenir la valeur de this.isActived.

Le même effet que l'opérateur ternaire est à utiliser if jugement :

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

Méthode 3 :

Nous l'avons utilisé directement au-dessus de la classe pour obtenir l'effet, alors comment implémenter le style style en html ? Le code n'est pas difficile. On peut imiter le second pour essayer l'effet :

<div id="root" @click=&#39;handleClick&#39; :style=&#39;styleObj&#39;>
        Hello World
    </div>

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

On donne une police noire de couleur noire par défaut Après avoir cliqué sur le texte de la page, la fonction handleClick est déclenchée à ce moment. , nous utilisons toujours L'opérateur ternaire détermine et obtient la valeur de this.styleObj.color pour obtenir l'effet.

Recommandations associées : "Tutoriel avancé Javascript"

Ce qui précède est une explication de la liaison de style dans Vue. Il existe de nombreuses façons d'obtenir le même effet. Tous les chemins mènent à Rome, les amis, commençons !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!