Vueのスタイルバインディングの詳しい説明

Vue のスタイル バインディングは Web ページで広く使用されています。CSS スタイルの追加と削除は、jq を使用して実装するのが難しくありません。今回は、例を使用して Vue の CSS スタイル バインディングの知識ポイントを克服します。

効果:

ページに「こんにちは」というテキストがあります。「こんにちは」をクリックすると、テキストの色が赤に変わります。もう一度クリックすると、テキストの色が黒に変わります。また。 。次に、色の変更を CSS スタイルで制御する必要があります。

方法 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>

この記述方法を説明します: class='{actived:isActived}' (isActived が false の場合)、class='' (isActived の場合) true の場合、class='actived' になります。

そこで、データにデフォルト値 false を定義しました。クリックすると、メソッド handleClick がトリガーされ、this.isActived が否定された値と等しくなります。

メソッド 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>

このメソッドでは、配列を指定し、マウスがクリックされたときに、配列内のデフォルトの空の値 isActived を渡します。 handleClick メソッドがトリガーされ、三項演算子を使用して this.isActived の値を取得します。

三項演算子と同じ効果は、if 判定を使用することです:

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

方法 3:

クラスのすぐ上で使用しました。この効果を実現するには、HTML でスタイルを実装するにはどうすればよいでしょうか?コードは難しくありません。2 番目のコードを真似して効果を試すことができます:

<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>

デフォルトでは黒のフォント色を黒にします。ページ テキストをクリックすると、関数 handleClick がトリガーされます。この時点では、 、効果を実現するために、三項演算子は this.styleObj.color の値を決定して取得します。

関連する推奨事項: 「javascript 上級チュートリアル 」

上記は、Vue でのスタイル バインディングの説明です。同じ効果を実現する方法はたくさんあります。すべての道はローマに通ず、友よ、さあ始めましょう！

以上がVueのスタイルバインディングの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。