hello world切换变色
第一种样式和数据绑定的方案
借助class和一个对象的形式，来做样式和数据绑定
语法：class的对象绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<style>
.activated {
color: deeppink;
}
</style>
<body>
<!--vue接管的div-->
<div id="root">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>
hello world
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
isActivated: false
},
methods: {
handleDivClick: function () {
this.isActivated = !this.isActivated
}
}
});
</script>
</body>
</html>
class可以和一个数组相绑定，数组里面写一个内容，内容就相当于变量，class会显示变量显示的内容，既然是一个数组，可以写一个变量也可以写多个变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<style>
.activated {
color: deeppink;
}
</style>
<body>
<!--vue接管的div-->
<div id="root">
<div @click="handleDivClick"
:class="[activated]"
>
hello world
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
activated: ""
},
methods: {
handleDivClick: function () {
this.activated = this.activated === "activated" ? "" : "activated";
}
}
});
</script>
</body>
</html>
style第一种用户对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="root">
<div :style="styleObj" @click="handleDivClick"
>
hello world
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
styleObj: {
color: "red"
}
},
methods: {
handleDivClick: function () {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
style第二种方式数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<!--引入vue.js库-->
<script src="../vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="root">
<div :style="[styleObj]" @click="handleDivClick"
>
hello world
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
styleObj: {
color: "red"
}
},
methods: {
handleDivClick: function () {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
