绑定HTML Class
一.对象语法（一）
在模板中给v-bind:class传递一个对象，通过对象的操作从而改变css样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
<style type = "text/css">
.myClass1{
height:100px;
width:100px;
background-color:red;
}
.myClass2{
background-color:blue;
}
</style>
</head>
<body>
<div class = "myClass1" :class = "{myClass2 : isTrue}"id = "app"></div>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data : {
isTrue : true,
}
})
</script>
</body>
</html>
二.对象语法(二）
绑定的对象可以不在模板当中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
<style type = "text/css">
.myClass1{
height:100px;
width:100px;
background-color:red;
}
.myClass2{
background-color:blue;
}
</style>
</head>
<body>
<div class = "myClass1" :class = "classObject" id = "app"></div>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data : {
classObject : {
myClass2 : true,
}
}
})
</script>
</body>
</html>
三.对象语法(三）
绑定一个返回对象的计算属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
<style type = "text/css">
.myClass1{
height:100px;
width:100px;
background-color:red;
}
.myClass2{
background-color:blue;
}
</style>
</head>
<body>
<div class = "myClass1" :class = "classObject" id = "app"></div>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data : {
isTrue : true,
},
computed : {
classObject : function(){
return {
myClass2 : this.isTrue,
}
}
}
})
</script>
</body>
</html>
四.数组语法
我们可以在模板中给v-bind:class传递一个数组，通过数组的值动态改变class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
.myClass1{
height:100px;
width:100px;
}
.myClass2{
background-color:blue;
}
</style>
<script src = "../js/vue.js"></script>
</head>
<div id = "app" :class = "[Class1, Class2]"></div>
<body>
<script type = "text/javascript">
const app = new Vue({
el : "#app",
data: {
Class1 : 'myClass1',
Class2 : 'myClass2',
}
})
</script>
</body>
</html>
绑定内联样式
一.对象语法
通过v-bind:style这一个javascript对象来控制样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<div id = "app" :style ="{backgroundColor : activeColor, width : activeWidth, height : activeHeight}"></div>
<body>
<script type = "text/javascript">
const app = new Vue({
el: "#app",
data: {
activeColor : 'red',
activeWidth : '100px',
activeHeight : '100px',
},
})
</script>
</body>
</html>
二.数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上，如下面的样式，一个控制尺寸，一个控制颜色，都加到同一个元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<div id = "app" :style ="[{backgroundColor : activeColor}, {width : activeWidth, height : activeHeight}]"></div>
<body>
<script type = "text/javascript">
const app = new Vue({
el: "#app",
data: {
activeColor : 'red',
activeWidth : '100px',
activeHeight : '100px',
},
})
</script>
</body>
</html>