Vue.js动态改变样式 |
您所在的位置：网站首页 › js更改样式 › Vue.js动态改变样式 |
Vue.js动态改变样式
|
动态改变样式
我们经常有这样的需求，就是用js控制css。但是我们知道js只能控制DOM层和BOM层，没有办法控制写入CSS文件。可是我们有时候偏偏需要改变样式怎么办呢？我们有两种方法： 动态改变style属性值动态切换class类名嗯嗯，没错。虽然我们不能用js直接操作css样式表，但是我们可以控制元素的样式属性嘛，class和style都是属性值，看起来有搞头呀，话不多说，开始了！！！ 控制style样式1.使用样式对象 html代码 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代码 你好Vue.js Vue.jsjs代码 var app = new Vue({ el: '#app', data: { color: '#FF0000', bg: 'pink' } })注意了：background-color要写成backgroundColor。因为key值不可能有- 3.使用（）嵌入三目表达式 html代码 布尔表达式js代码 var app = new Vue({ el: '#app', data: { isBold:true, opition: false, color: '#00FF00', } })可以在圆括号中嵌入布尔表达式，可以实现一个简单的控制样式选择的功能，有没有学到呢？ 4.使用对象数组进行样式覆盖 表达式： [{样式对象1}，{样式对象2},…] 后面的样式会覆盖前面的样式 代码示例 html代码 覆盖样式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： 请看下面这个示例 上述HTML代码最终渲染的结果是： class和:class并不冲突，他们是追加关系 示例代码 css代码 .normal{ color:white; } .red{ color: red; } .large{ font-size: 50px; }html代码 改变classjs代码 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代码 js代码 var app=new Vue({ el:'#app', data(){ return{ msg:'HelloWorld', control:false } }, created(){ setInterval(()=>{ this.control=!this.control },300) } })效果： vue切换样式的心跳效果 |
【本文地址】