一.v-if、v-show指令

1. v-if與v-else-if

• 如下例，兩個button綁定點擊事件，觸發(fā)更改error和success的值。
• v-if用來判斷，為true的話，就執(zhí)行標簽內(nèi)的語句；v-else-if，與js中elseif用法一致。

2. v-show

• 用法與v-if大致一樣。不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
• 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

二.v-for指令

1.v-for循環(huán)遍歷數(shù)組

• v-for="item in charactors"，遍歷charactors數(shù)組里的每一項
• v-for="(item, index) in users"，可傳兩個參數(shù)，item遍歷users數(shù)組中的每一項，index代表索引值。由于users數(shù)組里的每一項都是對象，所以輸出時可帶上屬性來獲取屬性值，eg:item.name。

2. v-for on a template

• 當在div中循環(huán)遍歷時，如圖控制臺中，div會被多次渲染于dom中。
• 如果將div改成template，就不會出現(xiàn)這樣的復雜情況

• v-for on a template

3.v-for循環(huán)遍歷對象

• 用法與遍歷數(shù)組一致，可以傳兩個參數(shù)，val屬性值，key屬性名