Vue中的样式绑定详解

前端  /  管理员 发布于 6年前   425

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的值来实现效果。

相关推荐：《javascript高级教程》

以上就是Vue中的样式绑定的讲解，同一个效果有很多种实现方法，条条大路通罗马，小伙伴get起来吧！

以上就是Vue中的样式绑定详解的详细内容，更多请关注其它相关文章！