Rumah  >  Artikel  >  hujung hadapan web  >  Vue中的样式绑定详解

Vue中的样式绑定详解

王雪芹
王雪芹asal
2020-08-17 18:30:331762semak imbas

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==&#39;&#39;){
       this.isActived=&#39;actived&#39;;
     }else{
       this.isActived=&#39;&#39;;
 }

方法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起来吧!

Atas ialah kandungan terperinci Vue中的样式绑定详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn