第4课：v-bind以及class与style的绑定
2018-09-03 本文已影响0人
我七
1.写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法
作用:v-bind通常用来绑定属性的，动态地绑定一些 class 类名或 style 样式，格式是v-bind：属性名 = "值"，简写:属性名 = "值"
变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名；
数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；
对象语法：v-bind:class = {classname1：boolean，classname2：boolean}，对象形式，这里的classname1（2）其实就是样式表中的类名，这里的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>yufa</title>
</head>
<body>
<div id="wrap">
<p>变量语法</p>
<div :class="ccc">我的class是class3</div>
<p>对象语法</p>
<div :class="{active:isActive}">我的class是active</div>
<p>数组语法</p>
<div :class='[aaa, bbb]'>我的class是class1和class2</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#wrap',
data:{
isActive: true,
aaa: 'class1',
bbb: 'class2',
ccc: 'class3'
}
})
</script>
</body>
</html>
2.使用v-bind对象语法来动态绑定一个class，使用对象语法
3.使用v-bind数组语法来动态绑定一个class，使用数组语法
4.v-bind绑定style属性
http://js.jirengu.com/fiwoqoveda/2/edit
http://js.jirengu.com/fiwoqoveda
