用 <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>

渲染成功