Vue.js动态改变样式

动态改变样式

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

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

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

控制style样式

1.使用样式对象

html代码

<div id="app">
    <!--冒号是v-bind的缩写-->
	<div :style="myStyle"></div>
</div>

js代码

var app = new Vue({
	el: '#app',
	data: {
		myStyle: {
			position: "relative",
			width: 100 + 'px',
			height: 100 + 'px',
			backgroundColor: "red",
		}
	}
})

直接使用样式对象来助阵，有没有学到呢？

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

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

html代码

<div id="app">
	<h1 :style="{color:color}">你好Vue.js</h1>
	<h1 :style="{color:color,backgroundColor:bg}">Vue.js</h1>
</div>

js代码

var app = new Vue({
	el: '#app',
	data: {
		color: '#FF0000',
		bg: 'pink'
	}
})

注意了：background-color要写成backgroundColor。因为key值不可能有-

3.使用（）嵌入三目表达式

html代码

<div id="app">
	<h1 :style="{color:(opition?'#222':color),fontWeight:(isBold?'bolder':'normal')}">布尔表达式</h1>
</div>

js代码

var app = new Vue({
	el: '#app',
	data: {
		isBold:true,
		opition: false,
		color: '#00FF00',
	}
})

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

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

表达式：
[{样式对象1}，{样式对象2},…]
后面的样式会覆盖前面的样式

代码示例

html代码

<div id="app">
	<h1 :style="[{color:color1},{color:color2}]">覆盖样式</h1>
</div>

js代码

var app = new Vue({
	el: '#app',
	data: {
		color1: '#00FF00',
		color2:'#0000FF',
	}
})

最终会显示#0000FF（蓝色），数组对象后面的会覆盖前面的。有没有学到呢？

控制class属性

1.使用对象控制

语法：{类名1：布尔值1，类名2：布尔值2}
当布尔值为true整个类生效，否则就不生效

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

例子2：

请看下面这个示例

<div class="class1" :class="{class2:true,class3:true}"></div>

上述HTML代码最终渲染的结果是：

<div class="class1 class2 class3"></div>

class和:class并不冲突，他们是追加关系

示例代码

css代码

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

html代码

<div id="app">
	<b class="normal" :class="{red:op,large:op}">改变class</b>
</div>

js代码

var app=new Vue({
	el:'#app',
	data(){
		return{
			op:true
		}
	}
})

看下效果：

注意看上面图片div上的class，class=“normal red large”

2.使用三目表达式控制

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

我们看它的语法格式

:class=“布尔值 ? ‘类1’ : ‘类2’”

如果布尔值为true，那么选择类1，为false则选择类2

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

代码示例

css代码：

*{
	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="app">
	<div class="red" :class="control?'large':'normal'"></div>
</div>

js代码

var app=new Vue({
	el:'#app',
	data(){
		return{
			msg:'HelloWorld',
			control:false
		}
	},
	created(){
		setInterval(()=>{
			this.control=!this.control
		},300)
	}
})

效果：

vue切换样式的心跳效果