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)
}
})
效果：