我们在学习js时有学到过如何去动态切换元素的样式,具体有以下步骤:
-
先获得元素
-
修改样式。通过className或者style修改
<head> <style> .class1 { border: 1px solid black; height: 20px; width: 20px; } </style> </head> <body> <div id='app'></div> <button onclick="change()">更改样式</button> </body> <script> function change() { var app = document.querySelector("#app") app.className = 'class1' app.style = 'color:red' } </script>
用js能达到动态修改样式的效果,但是会有点繁琐不方便,当要动态修改的样式一多就会使代码变得特别冗长,不利于维护。说到这就要请出今天的主角vue大兄弟出来了,没错今天呢就要讲讲vue如何动态绑定class与style。
class动态绑定
为了证明这一方法好用就先改改上面的代码。
<head>
<style>
.class1 {
border: 1px solid black;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="app">
<div :class="class1"></div>
<button @click="change">更改样式</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
class1: ''
},
methods: {
change() {
this.class1 = 'class1'
}
},
})
</script>
vue中通过v-bind(:)动态绑定data属性class1,当点击按钮时便触发change方法将class1的值变换从而改变div的样式。从上面看来比原生js动态改变元素样式的方法方便的多。动态样式的实现其实也能理解成将class看成一个变量,通过改变class的值去动态切换样式。
对class动态绑定有了大概了解后,接下来再深入了解。
添加class
<div class="class1" :class="class2" ></div>
上面代码中有两个class不同的是后一个class增加了v-bind(:),猜想会有人认为class2会将class1的样式进行覆盖,但是因为增加了v-bind而使本应该覆盖的情况转换成了添加,也就是说后面div的样式会呈现出下面这样的效果
<div class="class1 class2" ></div>
添加class数组
如果需要为一个元素添加多个样式可以使用此种方法
<div :class="classNames"> hi,everyone!!</div>
data: {
classNames: ['class1', 'class2', 'class3']
}
使用数组的方法可以很快速的添加或者删除样式。
也可以使用以下这种方法,但是这种方法弊端多,不建议使用只做了解
<div :class="[class1,class2,class3]"> hi,everyone!!</div>
添加class对象
这种方法用于已确定使用的样式,但是现在某种样式不显示或显示
语法
对象名:{
样式1:true|false,
样式2:true|false
}
具体实现
要求样式1显示而样式2不显示
<div :class="objClass"> hi,everyone!!</div>
data:{
objClass:{
class1:true,
class2:flase
}
}
也可以使用以下这种方法,但是这种方法弊端多,不建议使用只做了解
<div :class="{class1:true,class2:flase}"> hi,everyone!!</div>
案例:实现多种样式间的随机切换
<style>
.class1 {
color: black;
}
.class2 {
color: blue;
}
.class3 {
color: green;
}
</style>
</head>
<body>
<div id="app">
<div :class="className"> hi,everyone!!</div>
<button @click="change">更改样式</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
className: ''
},
methods: {
change() {
let arr = ['class1', 'class2', 'class3']
let index = Math.floor(Math.random() * 3)
this.className = arr[index]
console.log(index)
}
},
computed: {}
})
</script>
style动态绑定
css中为一个元素添加内联样式一般用
<div style="font-size:40px"></div>
现在我们有需求希望将font-size的值改为动态绑定,因此我们可以使用vue中的style动态绑定,先来改动上面的代码。
<div id="app" :style="{fontSize:fsize+'px'}"
new Vue({
el:'#app',
data:{
fsize:30
}
})
可以看到在vue中将font-size改成了fontSize这是因为vue中命名规则需将以横线命名改为驼峰命名,另外,style中有多个属性所以要以对象的形式包装多个属性,以上style样式也可以写成这样
data:{
style:{
fontSize:'30px',
color:'blue'
}
}
style对象写法
对象中的属性必须是css包含有的属性,只需更改成vue认可的命名规则即可,如:fontSize(font-size)、backgroundColor(background-color)
<body>
<div id="app" :style="style">
head,yes
</div>
<script>
new Vue({
el: '#app',
data: {
style: {
backgroundColor: 'green',
color: 'red',
width: '40px',
height: '100px'
}
}
})
</script>
</body>
style数组的写法
<body>
<div id="app" >
<div :style="[style,style1,style2]">head,yes<div>//数组格式方法一
<div :style="styleArr">head</div>//数组格式方法二
</div>
<script>
new Vue({
el: '#app',
data: {
style: {
backgroundColor: 'green',
height: '100px'
},
style1:{
color: 'red'
},
style2:{
width: '40px'
},
styleArr:[{
color: 'red'
},
{
width: '40px'
}]
}
})
</script>
</body>