vue动态样式
Posted 胖大大
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue动态样式相关的知识，希望对你有一定的参考价值。
1.class的对象绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Hello World</title>
<style>
.activated {
color: red;
}
</style>
</head><div :class="{activated: isActivated}" @click="handleClick" id="app">
{{message}}
</div>var app = new Vue({
el: \'#app\',
data: {
message: \'Hello World!!!\',
isActivated: false
},
methods: {
handleClick: function() {
this.isActivated = !this.isActivated
}
}
}) 2.class 数组绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Hello World</title>
<style>
.activated {
color: aqua;
}
.activatedOne {
color: red;
}
</style>
</head><div :class="[activated,activatedOne]" @click="handleClick" id="app">
{{message}}
</div>var app = new Vue({
el: \'#app\',
data: {
message: \'Hello World!!!\',
activated: \'\',
activatedOne: \'activatedOne\'
},
methods: {
handleClick: function() {
this.activated = this.activated === \'activated\' ? "" : \'activated\'
this.activatedOne = this.activatedOne === \'activatedOne\' ? "" : \'activatedOne\'
}
}
}) - 数组样式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Hello World</title>
<style>
.activated {
color: aqua;
}
.activatedOne {
color: red;
}
</style>
</head><div :style="[styleObj]" @click="handleClick" id="app">
{{message}}
</div>var app = new Vue({
el: \'#app\',
data: {
message: \'Hello World!!!\',
styleObj : {
color: "black"
}
},
methods: {
handleClick: function() {
this.styleObj.color = this.styleObj.color==="black" ? "red" : "black" ;
}
}
}) 以上是关于vue动态样式的主要内容，如果未能解决你的问题，请参考以下文章