动态改变样式
我们经常有这样的需求,就是用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
}
}
})
看下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/e8f6c39ac0695d4c6ca5c2f8c9d7c105.png)
注意看上面图片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)
}
})
效果: