Vue中的樣式綁定詳解

Vue中的樣式綁定在網頁中的應用比較廣泛，添加css樣式和刪除css樣式，用jq實現起來並不難，這次我們透過一個例子來攻克Vue中的css樣式綁定知識點。

效果：

在頁面上有一個文字「hello",點擊hello的時候，文字顏色變成紅色，再點擊，文字顏色又變成黑色。那麼顏色的變化，我們需要透過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'。

所以我們在data中定義了預設值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：

在上面我們直接用class來實現效果，那麼html中style樣式要如何實現呢？程式碼並不難，我們可以仿照第二個來試試看效果：

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

我們預設給一個黑色的字體顏色black，點頁面文字被點擊後，觸發函數handleClick，這個時候我們還是用三元運算子判斷取得this.styleObj.color的值來實現效果。

相關推薦：《javascript高階教學》

以上就是Vue中的樣式綁定的講解，同一個效果有很多種實作方法，條條大路通羅馬，小夥伴get起來吧！

以上是Vue中的樣式綁定詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！