v-bind指令
一 概念
```html
<div id="app">
<img v-bind:src='imgSrc' />
<!-- 简写 -->
<img :src='imgSrc' />
</div>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/favicon.ico'
}
})
</script>二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style type="text/css">
.abc {
background-color: red
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind: -->
<!-- 该指令 绑定 的是属性(html标签的全局属性) -->
<!-- 绑定后的属性的属性值可以由变量控制 -->
<p v-bind:abc="abc"></p>
<!-- 绑定后 操作单一变量 -->
<p v-bind:title="t1">p1p1p1p1p1p1p1</p>
<!-- 绑定后 操作普通字符串 -->
<p v-bind:title="'t2'">p2p2p2p2p2p2p2</p>
<!-- 多类名 单一变量操作 -->
<p v-bind:class="t3">p3p3p3p3p3p3p3</p>
<p v-bind:class="[t4, tt4]">p4p4p4p4p4p4</p>
<!-- 绑定class的{}语法 {key: value} key就是实际的类名,value是该类名的显隐(true就是起作用,false就是不起作用) -->
<p v-bind:class="{abc: false}">p5p5p5p5p5p5</p>
<p v-bind:class="{abc: t5}" v-on:click="fn">p5p5p5p5p5p5</p>
<!-- class的[] {} 结合使用 -->
<!-- class的值为p6 pp6, t6 tt6是值为true|false的变量,控制p6 pp6是否起作用 -->
<p v-bind:class="[{p6: t6}, {pp6: tt6}]">p6p6p6p6p6p6p6p6</p>
<!-- v-bind操作class -->
<!-- [a, b] a,b为变量,对其赋值的是class的具体值 -->
<!-- eg: a:active b:red => class="active red" -->
<!-- {a: b} a为class值, b为值为true|false的变量,控制a的显隐 -->
<!-- eg: b:true => class="a" -->
<!-- eg: b:false => class="" -->
<!-- v-bind:指令可以简写 : -->
<p :class="'simple'">简写</p>
<!-- 操作style -->
<!-- style一般都是多条样式 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
abc: "ABC",
t1: "p1的title",
t3: "p pp",
t4: "p",
tt4: "pp",
t5: false,
t6: true,
tt6: true,
div_style: {
width: "200px",
height: "200px",
backgroundColor: "cyan"
}
},
methods: {
fn () {
this.t5 = !this.t5;
}
}
})
</script>
</html>
