1.写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法
v-bind的作用：用来绑定属性，动态地绑定一些 class 类名或 style 样式，格式是 v-bind：属性名 = "值"，简写 :属性名 = "值"。
变量语法：v-bind：class = "变量"，这里的变量，通常是在css定义好的类名。
数组语法：v-bind：class= "[变量1，变量2]" ，数组形式可以同时绑定多个类名。
对象语法：v-bind：class = {classname：boolean}，classname是样式中的类名，boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>v-bind</title>
<style>
.box {width: 100px;height: 100px;background-color: pink;text-align: center;line-height: 100px;}
.box2{border: 2px solid green;}
</style>
</head>
<body>
<div id="demo">
<div :class="wBox1">变量语法</div>
<div :class="{box:wBox}">对象语法</div>
<div :class="[wBox1, wBox2]">数组语法</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
wBox1: "box",
wBox2: "box2",
wBox: true
}
});
</script>
</body>
</html>
2.使用v-bind对象语法来动态绑定一个class，使用对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>v-bind对象绑定</title>
<style>
.box {width: 100px;height: 100px;background-color: pink;text-align: center;line-height: 100px;}
</style>
</head>
<body>
<div id="demo">
<div :class='{box:wBox}'>对象语法</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
wBox: true
}
});
</script>
</body>
</html>
3.使用v-bind数组语法来动态绑定一个class，使用数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>v-bind数组绑定</title>
<style>
.box {width: 100px;height: 100px;background-color: pink;text-align: center;line-height: 100px;}
.box2{border: 2px solid green;}
</style>
</head>
<body>
<div id="demo">
<div :class="[wBox1, wBox2]">数组语法</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
wBox1: "box",
wBox2: "box2",
}
});
</script>
</body>
</html>
4.v-bind绑定style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>v-bind绑定style属性</title>
</head>
<body>
<div id="demo">
<div :style="{'width':w,'height':h,'background-color':bg}">style属性</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#demo",
data: {
w: "100px",
h: "100px",
bg: "pink"
}
});
</script>
</body>
</html>
