![2de62170a0be6df1b58d8e5711ba5d28.png](https://img-blog.csdnimg.cn/img_convert/2de62170a0be6df1b58d8e5711ba5d28.png)
php中文网最新课程
每日17点准时技术干货分享
![cdff53686b83bf4a48adb04dff59a977.png](https://img-blog.csdnimg.cn/img_convert/cdff53686b83bf4a48adb04dff59a977.png)
本文为php中文网认证作者:“王雪芹”投稿,欢迎加入php中文网有偿投稿计划!
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的值来实现效果。
▼