用 <b>v-bind 指令</b>（以后都用縮寫的形式）來動態綁定一個標簽的屬性。
一、綁定class
<b>（1）對象語法來綁定class：</b>動態綁定的class的值是一個對象{ ‘active’ : isActive }，isActive是我們vm實例的數據，值為true，
<div id="app">
<p :class="{'active':isActive,'danger':isDanger,'error':isError}">這是文字</p>
</div>
<script>
new Vue({
el:"#app",
data:{
isActive:true,
isDanger:true,
isError:false,
}
})
</script>
渲染成功
<strong>釋：</strong>class的值最后被渲染成：“active danger”，在對象中，<b>值為true的會被成功渲染出來，為false的則不會被渲染出來。</b>
一旦vm實例對應的數據發生變化，比如isActive的值由true變成false，視圖上的’active’ 類也會被刪除，這樣就會實現動態綁定樣式啦！
eg:之前的一個例子動態綁定class
<style>
/* 默認狀態下*/
#app div div cite{
background: darkred;
color: #fff;
}
/* 沒有結束狀態下*/
#app div div .finish{
background:#ccc;
color: #000000;
}
</style>
<!--添加動態class名字-->
<div id="app">
<my-list
v-for="amk_pp in amk_list"
:detail="amk_pp"
></my-list>
</div>
<script>
Vue.component('my-list',{
props:['detail'],
template:`
<div style="margin-top:10px;">
<span><a>< img src="detail.img_url“ /></a></span>
<div>
<h5><a>{{detail.title}}</a></h5>
<p>特賣價：<b>{{detail.sale_price}}</b></p>
<p><a>{{detail.org_price}}</a></p>
<cite :class="{'finish':detail.ended}">{{detail.state}}</cite>
<!-- :class就是動態綁定class名字-->
</div>
</div>`
});
new Vue({
el:"#app",
data:{
amk_list:[
{
img_url:"../images/bird1.png",
title:"精選牛肉精選牛肉精選牛肉",
sale_price:"￥56800",
org_price:"原價：￥76000",
state:"立即購買",
ended:false,
},
{
img_url:"../images/bird2.png",
title:"hiddensmile",
sale_price:"￥123200",
org_price:"原價：￥200000",
state:"已結束",
ended:true,
},
]
}
});
</script>
動態加載class成功
<b>（2）數組語法語法來綁定class：</b>動態綁定的class的值是數組有兩個元素[ activeClass , errorClass ]，它們對應的值是vm實例的數據data：
<div id="app">
<p :class="[activeClass,errorClass,borderClass]">這是數組語法</p>
</div>
<script>
new Vue({
el:"#app",
data:{
activeClass:'active',
errorClass:'error',
borderClass:'border',
}
})
</script>
渲染成功
<strong>釋：</strong>渲染的時候，activeClass、errorClass和borderClass對應的值就會被渲染成class。
二、綁定內聯樣式style
<b>（1）對象語法來綁定class：</b>看著非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：
<div id="app">
<p :style="{color:color_style}">綁定內聯樣式style</p>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">綁定內聯樣式style 對象語法來綁定class</div>
</div>
<script>
new Vue({
el:"#app",
data:{
color_style:'orange',
activeColor:'pink',
fontSize:30,
}
})
渲染成功
直接綁定到一個樣式對象通常更好，讓模板更清晰：
<div id="app">
<p :style="objStyle">綁定內聯樣式 綁定到一個樣式對象</p>
</div>
<script>
new Vue({
el:"#app",
data:{
objStyle:{
color: 'red',
fontSize: '20px',
height:'30px',
border:' 1px solid #ccc',
}
}
})
</script>
渲染成功
<b>（2）數組語法語法來綁定class：</b>動態綁定的class的值是數組有兩個元素[objStyle,colorStyle]
<div id="app">
<div :style="[objStyle,colorStyle]">綁定內聯樣式style 數組語法</div>
</div>
<script>
new Vue({
el:"#app",
data:{
objStyle:{
fontSize: '20px',
height:'30px',
},
colorStyle:{
color: 'red',
border:' 1px solid #ccc',
}
}
})
</script>
渲染成功
