Vue属性绑定指令 -- v-bind
可简写为 ：
普通属性:页面可解析为id=“4”
<p v-bind:id="2*2">{{msg}}</p>
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>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.red {
background: red;
}
.big {
font-size: 4em;
}
</style>
<body>
<div id="app">
<p class='red'>这是一个p段落标签...</p>
<!--绑定red属性 -->
<p v-bind:class='redColor'>这是一个p段落标签...</p>
<!-- 当点击时，属性值切换 -->
<p @click="flag=!flag" :class='{red:flag}'>这是一个p段落标签...</p>
<!-- 绑定big和red属性 -->
<p class='big' :class="{'red':true}">这是一个p标签..</p>
<!-- 以数组形式绑定big和red属性 -->
<p :class="['big','red']">这是一个p标签..</p>
<!-- 绑定big,判断flag的值是否为true，为true时绑定red属性 -->
<p :class="['big',(flag?'red':'')]">这是一个p标签..</p>
<!-- 绑定big,判断flag的值是否为true，为true时绑定red属性 -->
<p class='big' :class='flag?"red":""'>这是一个p标签..</p>
<!-- 行内样式绑定 -->
<p :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
redColor:'red',
flag:true,
activeColor: 'green',
fontSize: 30
}
})
</script>
</body>
</html>