知識點：
v-bind 動態綁定標簽屬性
v-bind 可簡寫為 :
使用v-bind 綁定class和內聯樣式
使用v-if,v-show,v-else進行條件渲染
<template>
<div>
(1) v-bind a標簽跳轉頁面
<a v-bind:href="link">to baidu</a> <!-- v-bind:==:--> 點擊to baidu跳轉到百度首頁
效果：
數據：
link的值，為跳轉的地址 http://www.baidu.com
（2-1） v-bind 綁定class
<a class="link-href" v-bind:class="className">to baidu1111</a> <!-- className是一個對象-->
效果：
數據：
data(){
return{
link: 'http://www.baidu.com',
classStr:'red-font',
className:{
'red-front':true, true顯示，false不顯示
'bule-front':true,
'yellow-front':false
},
（2-1）
<a class="link-href" v-bind:class="[classA,{'red-front':hasError}]">to baidu2222</a> <!-- class為一個集合，classA是一個變量，asError也是一個變量-->
效果：
數據：
classA: 'hello',
hasError:true,
（3）v-bind 綁定內聯樣式CSS
<a class="link-href" :style="linkCss">to baidu3333</a> <!--內聯樣式CSS-->
效果：
數據：
linkCss:{
'color':'red',
'font-size':'20px'
},
（4）v-if,v-else,v-show 進行條件渲染
<a v-if="isPartA">partA</a> <!--條件渲染--> 如果是isPartA,則顯示partA
<a v-else>no data</a> 否則顯示no data
<!--<a v-show="!isPartA">partB</a>--> 否則顯示 partB
<button v-on:click="toggle">toggle</button>
效果：點擊toggle按鈕時，顯示partA
再次點擊toggle按鈕時，顯示no data
數據：
isPartA:true
}
},
methods : {
addItem () {
Vue.set(this.list,1,{
name: 'pineapple',
price:233
})
},
toggle(){
this.isPartA=!this.isPartA
}
}
</div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import Hello from './components/Hello'
import componeta from './components/a.vue'
export default {
components:{
componeta :componeta
},
data(){
return{
link: 'http://www.baidu.com',
classStr:'red-font',
className:{
'red-front':true,
'bule-front':true,
'yellow-front':false
},
classA: 'hello',
hasError:true,
linkCss:{
'color':'red',
'font-size':'20px'
},
isPartA:true
}
},
methods : {
addItem () {
/* this.list.push({
name:'pineapple',
price:100
})*/
Vue.set(this.list,1,{
name: 'pineapple',
price:233
})
},
toggle(){
this.isPartA=!this.isPartA
}
}
}
</script>
<!--樣式代碼-->
<style>
html {
height: 100%;
}
</style>