1 class的对象绑定
1.1 需求
现在要实现点击div区域里的 hello world 文本时，文本变成红色。
1.2 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{activated: isActivated}"
@click="handleDivClick">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function () {
this.isActivated = true;
}
}
})
</script>
</body>
</html>效果：
咋实现点击后，再褪色回去呢？实现取反即可，而不是定值 true。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <div :style="[styleObj, {fontSize: '20px'}]"-->
<!-- @click="handleDivClick">-->
<!-- Hello world-->
<!-- </div>-->
<div :class="{activated: isActivated}"
@click="handleDivClick">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isActivated: false
// styleObj: {
// color: "black"
// }
},
methods: {
handleDivClick: function () {
// this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
// 点击变成红色
// this.isActivated = true;
// 再点击褪色
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>2 数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style>
.activated {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activated]">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activated: ""
},
methods: {
handleDivClick: function () {
this.activated = "activated"
}
}
})
</script>
</body>
</html>如何实现再点击后，褪色呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script src="../vue.js"></script>
<style>
.activated {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activated]">
Hello world
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activated: ""
},
methods: {
handleDivClick: function () {
if (this.activated === "activated") {
this.activated = "";
} else {
this.activated = "activated";
}
}
}
})
</script>
</body>
</html>
3 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="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>
</html>div使用:style绑定样式对象styleObj。Vue实例中定义数据对象styleObj，color属性初始值为black。
定义了一个方法handleDivClick，当点击div时，判断color属性的值:
- 如果为black则将其改为red
- 否则改为black
挂一个数组
<!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, {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>
</html>