方法一：class的对象绑定
通过修改某个div的class那么来实现css的绑定
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Vue中的样式绑定
</title
>
<script src
="./vue.js"></script
>
<style
>
.actived
{
color
: red
;
}
</style
>
</head
>
<body
>
<div id
="app">
<div @click
="handelDivClick" :class="{actived: isActived}">
hello world
</div
>
</div
>
<script
>
var vm
= new Vue({
el
: '#app',
data
: {
isActived
: false
},
methods
: {
handelDivClick
: function
() {
this.isActived
= !this.isActived
;
}
}
})
</script
>
</body
>
</html
>
方法二：通过class数组来实现样式的变换
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Vue中的样式绑定
</title
>
<script src
="./vue.js"></script
>
<style
>
.actived
{
color
: red
;
}
</style
>
</head
>
<body
>
<div id
="app">
<div @click
="handelDivClick" :class="[actived]">
hello world
</div
>
</div
>
<script
>
var vm
= new Vue({
el
: '#app',
data
: {
actived
: ""
},
methods
: {
handelDivClick
: function
() {
this.actived
= this.actived
=== "actived" ? "":"actived";
}
}
})
</script
>
</body
>
</html
>
方法三：通过div绑定的style属性来修改
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Vue中的样式绑定
</title
>
<script src
="./vue.js"></script
>
</head
>
<body
>
<div id
="app">
<div
:style
="styleObj" @click
="handelDivClick">
hello world
</div
>
</div
>
<script
>
var vm
= new Vue({
el
: '#app',
data
:{
styleObj
:{
color
:"black"
}
},
methods
: {
handelDivClick
:function(){
this.styleObj
.color
= this.styleObj
.color
=== "red" ? "black":"red";
}
}
})
</script
>
</body
>
</html
>
