样式绑定
一、样式绑定二、代码
一、样式绑定
希望数据改变样式也跟着改变 方法一：class的对象绑定 方法二：class的数组绑定 方法三：内联样式（内联也可以通过对象和数组两种方式定义） 对象定义 数组定义，样式由数组里的对象决定
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式绑定
</title>
<script src="./vue.js"></script>
<style>
.activated {
color: #19d896;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleClick2" :style="[styleObj, {fontSize: '20px'}]">
假期快乐
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleClick2: function() {
this.styleObj.color = this.styleObj.color === "black" ? "#19d896" : "black"
},
handleClick: function() {
this.isActivated = !this.isActivated;
},
handleClick1: function() {
this.activated = this.activated === "activated" ? "" : "activated"
}
}
})
</script>
</body>
</html>
