Vue:v-bind指令
来自CloudWiki
对于html标签的text、value等属性，Vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢，这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了text、value之外的其他html标签属性，常见的比如class、style、自定义标签的自定义属性等。它的语法如下：
v-bind:property="expression"
先来看几个简单的例子。
在下面的代码中 “backred:IsBack”，如果IsBack值为True ，则为span 绑定backred类,否则的话 不绑定backred类.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8">
</script>
<style type="text/css">
.class1 {
padding:20px;
}
.backred {
background-color:red;
}
</style>
<title></title>
</head>
<body>
<div id="app">
<h1>姓名：<label v-text="Name"></label></h1>
<h1>是否红领巾：<span class="class1" v-bind:class="{backred:IsBack}"><label v-if="IsBack">是</label></span></h1>
<h1>学校星级：<span v-bind:style="{color:SchoolLevel}">aa</span></h1>
</div>
<script type="text/javascript">
//Model
var data = {
Name: '小明',
Age: 18,
School: '光明小学',
SchoolLevel: 'red',
IsBack:true
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
});
</script>
</body>
</html>
