Detailed explanation of style binding in Vue

Style binding in Vue is widely used in web pages. Adding css styles and deleting css styles is not difficult to implement with jq. This time we use an example to overcome the knowledge points of css style binding in Vue. .

Effect:

There is a text "hello" on the page. When you click hello, the text color turns red. Click again and the text color turns black again. . Then the color change needs to be controlled through css style.

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

Explain this writing method: class='{actived:isActived}', if isActived is false, then class='', if isActived If it is true, then class='actived'.

So we defined the default value false in data. When clicked, the method handleClick will be triggered, making this.isActived equal to the negated value.

Method 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 this method we give an array, and pass a default empty value isActived in the array, when the mouse is clicked , the handleClick method will be triggered, where we use the ternary operator to get the value of this.isActived.

The same effect as the ternary operator is to use if judgment:

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

Method 3:

We used it directly above class to achieve the effect, then how to implement the style style in html? The code is not difficult. We can imitate the second one to try the effect:

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

We give a black font color black by default. After the page text is clicked, the function handleClick is triggered. At this time, we still use The ternary operator determines and obtains the value of this.styleObj.color to achieve the effect.

Related recommendations: "javascript Advanced Tutorial"

The above is the explanation of style binding in Vue. There are many ways to achieve the same effect. All roads lead to Rome, friends, let’s get started!

The above is the detailed content of Detailed explanation of style binding in Vue. For more information, please follow other related articles on the PHP Chinese website!