Vue中样式绑定是什么-创新互联

这篇文章给大家分享的是有关Vue中样式绑定是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站设计、网站制作、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

Vue中的样式绑定在网页中的应用比较广泛，添加css样式和删除css样式，用jq实现起来并不难，这次我们通过一个例子来攻克Vue中的css样式绑定知识点。

效果：

在页面上有一个文字“hello",点击hello的时候，文字颜色变成红色，再点击，文字颜色又变成黑色。那么颜色的变化，我们需要通过css样式来控制。

方法1：

<div id="root" @click='handleClick' :class='{actived:isActived}'>
        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='handleClick' :class='[isActived]'>
        Hello World
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                isActived:'',
            },
            
            methods:{
                handleClick:function(){
                     this.isActived=this.isActived===''?'actived':'';
                }
            }
            
        })
    </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='handleClick' :style='styleObj'>
        Hello World
    </div>

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

我们默认给出一个黑色的字体颜色black，点页面文字被点击后，触发函数handleClick，这个时候我们仍然用三元运算符判断获取到this.styleObj.color的值来实现效果。

感谢各位的阅读！关于Vue中样式绑定是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章题目：Vue中样式绑定是什么-创新互联
链接分享：https://www.cdcxhl.com/article0/djghio.html

成都网站建设公司_创新互联，为您提供网站营销、品牌网站设计、Google、App开发、网站内链、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容