1.Vue中的样式绑定
1)数据绑定之实现点击文字变色,并可多次点击
(1)class对象绑定:借助class和对象来实现对样式的绑定
<head>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isActivated: false //默认不显示activated样式
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated
}
}
})
</script>
</body>
(2)class数组绑定
<head>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activated, activatedOne]"
>
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activated: "", //默认变量为空
activatedOne: "activated-one"
},
methods: {
handleDivClick: function() {
// if (this.activated == "activated") {
// this.activated = "";
// }else {
// this.activated = "activated";
// } //等价于下式
this.activated = this.activated == "activated" ?
"" : "activated"
}
}
})
</script>
</body>
(3)style改变样式
<body>
<div id="app">
写法一:(对象)
<div :style="styleObj" @click="handleDivClick">
Hello world
</div>
写法二:(数组法)
<div :style="[styleObj, {fontSize: '20px'}]" @click="handleDivClick">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function() {
this.styleObj.color = this.styleObj.color ==
"black" ? "red" : "black";
}
}
})
</script>
</body>