條件渲染指令： v-if、v-else-if的圆、v-else：可以根據(jù)表達(dá)式的值在DOM中渲染或銷毀元素/組件,與v-show不同的是贮配，v-if是真正的條件渲染，適合條件不經(jīng)常變更的場(chǎng)景耍铜；而v-show只是簡(jiǎn)單的CSS屬性切換邑闺，使用于頻繁切換條件。
v-if舉例：
當(dāng)status為1時(shí)顯示該行當(dāng)status為2時(shí)顯示該行否則顯示該行varapp =newVue({? ? el :'#app',? ? data:{? ? ? status:1}})
v-show舉例：
當(dāng)status為1時(shí)顯示該行varapp =newVue({? ? el :'#app',? ? data:{? ? ? status:2}})
列表渲染指令：v-for：當(dāng)需要將一個(gè)數(shù)組遍歷或枚舉一個(gè)對(duì)象循環(huán)顯示時(shí)棕兼，會(huì)用到列表渲染指令v-for陡舅，結(jié)合in來(lái)使用
舉例：
varapp =newVue({? ? ? el :'#app',? ? ? data:{? ? ? ? books:[? ? ? ? ? { name :'Vue.js'},? ? ? ? ? { name :'JavaScript'},? ? ? ? ? { name :'HTML5+CSS3'},? ? ? ? ? ]? ? }})條件與循環(huán)結(jié)合的一個(gè)綜合例子：
<!DOCTYPE html>Vue.js條件與循環(huán)#app{width:80%;margin:0auto;? ? ? ? ? ? }.container{display: flex;? ? ? ? ? ? }.card{width:200px;height:200px;border:1pxsolid#eee;border-radius:10px;margin-right:30px;text-align: center;? ? ? ? ? ? }.cardimg{width:100%;height:100%;border-bottom-left-radius:10px;border-bottom-right-radius:10px;? ? ? ? ? ? }.like{color: green;? ? ? ? ? ? }.no-like{color: red;? ? ? ? ? ? }顯示書籍信息
{{book.name}}
<!-- <p v-if="book.like">喜歡</p> -->喜歡不喜歡varapp =newVue({? ? ? ? ? ? ? ? el:'#app',? ? ? ? ? ? ? ? data: {? ? ? ? ? ? ? ? ? ? show:true,? ? ? ? ? ? ? ? ? ? books: [{? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'時(shí)間的禮物',? ? ? ? ? ? ? ? ? ? ? ? ? ? cover:'https://img1.doubanio.com/view/subject/m/public/s29951659.jpg',? ? ? ? ? ? ? ? ? ? ? ? ? ? like:true},? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'顯微鏡下的大明',? ? ? ? ? ? ? ? ? ? ? ? ? ? cover:'https://img3.doubanio.com/view/subject/m/public/s29960161.jpg',? ? ? ? ? ? ? ? ? ? ? ? ? ? like:false},? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'夏摩山谷',? ? ? ? ? ? ? ? ? ? ? ? ? ? cover:'https://img3.doubanio.com/view/subject/m/public/s29967206.jpg',? ? ? ? ? ? ? ? ? ? ? ? ? ? like:true},? ? ? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? ? ? name:'642件可寫的事',? ? ? ? ? ? ? ? ? ? ? ? ? ? cover:'https://img3.doubanio.com/view/subject/m/public/s29953545.jpg',? ? ? ? ? ? ? ? ? ? ? ? ? ? like:false}? ? ? ? ? ? ? ? ? ? ]? ? ? ? ? ? ? ? }? ? ? ? ? ? })