Vue.js动态改变样式

我们经常有这样的需求&＃xff0c;就是用js控制css。但是我们知道js只能控制DOM层和BOM层&＃xff0c;没有办法控制写入CSS文件。可是我们有时候偏偏需要改变样式怎么办呢&＃xff1f;我们有两种方法&＃xff1a;

• 动态改变style属性值
• 动态切换class类名

嗯嗯&＃xff0c;没错。虽然我们不能用js直接操作css样式表&＃xff0c;但是我们可以控制元素的样式属性嘛&＃xff0c;class和style都是属性值&＃xff0c;看起来有搞头呀&＃xff0c;话不多说&＃xff0c;开始了&＃xff01;&＃xff01;&＃xff01;

1.使用样式对象

html代码

<div id&＃61;"app"><div :style&＃61;"myStyle">div>
div>


js代码

var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {myStyle: {position: "relative",width: 100 &＃43; &＃39;px&＃39;,height: 100 &＃43; &＃39;px&＃39;,backgroundColor: "red",}}
})


直接使用样式对象来助阵&＃xff0c;有没有学到呢&＃xff1f;

注意style样式中带-的&＃xff0c;在对象中-后面的要大写。background-color要写成backgroundColor

2.使用{}写入样式对象

html代码

<div id&＃61;"app"><h1 :style&＃61;"{color:color}">你好Vue.jsh1><h1 :style&＃61;"{color:color,backgroundColor:bg}">Vue.jsh1>
div>


js代码

var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {color: &＃39;#FF0000&＃39;,bg: &＃39;pink&＃39;}
})


注意了&＃xff1a;background-color要写成backgroundColor。因为key值不可能有-

3.使用&＃xff08;&＃xff09;嵌入三目表达式

html代码

<div id&＃61;"app"><h1 :style&＃61;"{color:(opition?&＃39;#222&＃39;:color),fontWeight:(isBold?&＃39;bolder&＃39;:&＃39;normal&＃39;)}">布尔表达式h1>
div>


js代码

var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {isBold:true,opition: false,color: &＃39;#00FF00&＃39;,}
})


可以在圆括号中嵌入布尔表达式&＃xff0c;可以实现一个简单的控制样式选择的功能&＃xff0c;有没有学到呢&＃xff1f;

4.使用对象数组进行样式覆盖

表达式&＃xff1a;
[{样式对象1}&＃xff0c;{样式对象2},…]
后面的样式会覆盖前面的样式

代码示例

html代码

<div id&＃61;"app"><h1 :style&＃61;"[{color:color1},{color:color2}]">覆盖样式h1>
div>


js代码

var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {color1: &＃39;#00FF00&＃39;,color2:&＃39;#0000FF&＃39;,}
})


最终会显示#0000FF&＃xff08;蓝色&＃xff09;&＃xff0c;数组对象后面的会覆盖前面的。有没有学到呢&＃xff1f;

1.使用对象控制

语法&＃xff1a;{类名1&＃xff1a;布尔值1&＃xff0c;类名2&＃xff1a;布尔值2}
当布尔值为true整个类生效&＃xff0c;否则就不生效

例子1&＃xff1a;{blue: true,big:true}
这个时候blue、big这两个类都会作用在元素上&＃xff0c;不过big在blue的后面

例子2&＃xff1a;

请看下面这个示例

<div class&＃61;"class1" :class&＃61;"{class2:true,class3:true}">div>


上述HTML代码最终渲染的结果是&＃xff1a;

<div class&＃61;"class1 class2 class3">div>


class和:class并不冲突&＃xff0c;他们是追加关系

示例代码

css代码

.normal{color:white;
}
.red{color: red;
}
.large{font-size: 50px;
}


html代码

<div id&＃61;"app"><b class&＃61;"normal" :class&＃61;"{red:op,large:op}">改变classb>
div>


js代码

var app&＃61;new Vue({el:&＃39;#app&＃39;,data(){return{op:true}}
})


看下效果&＃xff1a;

注意看上面图片div上的class&＃xff0c;class&＃61;“normal red large”

2.使用三目表达式控制

上面的方法看起来已经很不错了&＃xff0c;它的思想需要写class和:class配合&＃xff0c;产生层叠覆盖&＃xff0c;从而达到切换样式的效果。
不过我们的三目表达式是切换样式的大拿&＃xff0c;它要比上面的方法强大的多

我们看它的语法格式

:class&＃61;“布尔值 ? ‘类1’ : ‘类2’”

如果布尔值为true&＃xff0c;那么选择类1&＃xff0c;为false则选择类2

我们接下来演示的案例是一个小型综合案例&＃xff0c;它实现的是心跳效果&＃xff0c;大家可以仔细看看

代码示例

css代码&＃xff1a;

*{padding: 0;margin: 0;
}
html,body{display: flex;width: 100%;height: 100%;
}
div{width: 200px;height: 200px;border-radius: 50%;margin: auto;background-color: #FF0000;
}
.red{color: red;
}
.large{font-size: 18px;transform: scale(3);transition: all 3s;
}
.normal{font-size: 18px;transform: scale(1);transition: all 3s;
}


html代码

<div id&＃61;"app"><div class&＃61;"red" :class&＃61;"control?&＃39;large&＃39;:&＃39;normal&＃39;">div>
div>


js代码

var app&＃61;new Vue({el:&＃39;#app&＃39;,data(){return{msg:&＃39;HelloWorld&＃39;,control:false}},created(){setInterval(()&＃61;>{this.control&＃61;!this.control},300)}
})


效果&＃xff1a;

vue切换样式的心跳效果