列表迴圈渲染
v-if與v-show控制渲染的機制的區別當它們的引數值是true時，毫無疑問對應的元件便是展示的：
data()
},template: `
luelueluelielielie
bye bye！！！
` });
當它們的引數值是false時，v-if通過直接暴力去除對應dom元件的形式 「隱藏」元件，
而v-show則通過style="display: none;"樣式的配置 隱藏元件：data()
v-if與v-show各自的適用場景
基於以上的隱藏元件的機制，
頻率較低地隱藏元件的場景，兩者都差不多，
不想占用過多dom資源的話，可以考慮使用v-if;v-show適用於頻率較高的隱藏元件的場景；
v-if與v-else的配合 控制渲染
上例程：
data()
},template: `
luelueluelielielie
if text
else text
bye bye！！！
` });
v-if與v-else兩個指令修飾的兩個元件
一定要是成對出現的，放在一起前後兩行銜接的，
不然容易出錯或報錯；
接著，v-if與v-else兩個指令修飾的兩個元件，
同一時間只會出現乙個，
由v-if指定繫結的字段，v-else不需要指定；
欄位為true時，v-if修飾的元件顯示，
欄位為false時，v-else修飾的元件顯示：
v-if、v-else-if與v-else的配合 控制渲染
即如普通程式設計的邏輯，v-if繫結欄位為true時候，只顯示v-if修飾的元件，
否則，v-else-if繫結欄位為true時候，只顯示v-else-if修飾的元件，
再否則，
只顯示v-else修飾的元件；
列表迴圈渲染
v-for例程(陣列方式)：
data()
},template: `
} --- }
` });
v-for例程(object方式 --- 注意引數順序！！！)：data() }},
注意使用key值優化v-for的效能
當使用v-for做迴圈渲染，盡量加乙個每一項都唯一的key值，
這樣下次新增元素的時候，vue底層發現 其key值在資料更新前後都沒變的dom項，
就會直接復用這個dom項，而不用重建這個dom項，
達到優化效能的目的；
data() }},
template: `
} --- }
` });
通過陣列的變更函式 更新渲染列表ui
本質其實就是借助 原生js陣列的 api對資料進行更新，
再借助vue的資料與ui的雙向繫結特性，
完成對ui的更新渲染：
data() }},
methods: ,
handledeletebtnclick() ,
handleshiftbtnclick() ,
handleunshiftbtnclick() ,
handlesplicebtnclick() ,
handleunsortbtnclick() ,
handlereversebtnclick()
},template: `
} --- }
在末尾新增節點
刪除末尾節點
刪除開頭的節點
在開頭新增節點
插入或替換部分的節點
排序節點
反轉節點
` });
效果圖如下，
這裡由於功能比較繁多而簡單，就不做詳細操作了：
Vue教程5 條件與列表渲染
之前我們說過 v if命令接收true false後會對乙個元素進行顯示與否，但是當我們需要對多個元素進行切換時，我們就需要多個v if了。因此vue就提出了v else v else if。假設我們一共三個元素，利用template標籤。這樣就可以利用a不同的值來切換三種不同的元素。當 v if ...
vue系列課程3 條件渲染
單一檢視 v if show 我是if為true看到的p v else 我是if為false看到的p div template export default script 多檢視 v if show 我是if為true看到的span 哈哈哈a 是span p v else 我是if為false看到的...
Vue 模板渲染 條件渲染 列表渲染
當獲取到後端資料後，我們會把它按照一定的規則載入到寫好的模板中，輸出成在瀏覽器中顯示的 html，這個過程就稱之為渲染。而 vue.js 是在前端 即瀏覽器內 進行的模板 渲染。1.前後端渲染對比 前端渲染 的優勢 是在瀏覽器裡利用 js 把資料和 html 模板進行組合，業務分離，後端只需要提供資...