Vue知識點總結(2)——v-for、v-if、v-show(超級詳細)

這篇文章我們了解一下v-for、v-if、v-show指令的用法，這三個指令都是常用的。順便我們會講解一道高頻面試題：v-if和v-show的區別。

v-for

v-for在實際的業務開發中非常的普遍。我們在學習一些高級語言的時候都知道for循環，通過循環我們可以遍歷出數據規範相似的數據組。
我們思考一個業務場景：在商城中，我們點擊一種商品分類，會渲染出很多種規格類似的商品。
如果渲染出20組商品就要寫20個相同的組件嗎？程式設計師必然不可能這麼傻。
一個商品卡片的內容可能有圖片、名字、價格、庫存、商品描述。這20個商品都是這些欄位，只是改變了欄位的值而已。
所以，這就是v-for指令的作用所在。
我們使用v-for就可以用一種商品卡片的代碼，渲染出無窮無盡的商品，只要我們想。
下面說一下基本的語法：

<div id="app">    <ul>        <li v-for="item in items">            {{item}}        </li>    </ul></div><script type="text/javascript">    var app = new Vue({        el:'#app',        data:{            items:[59,82,96,41,55,2,4,91,25],        },    });</script>
這就是v-for最基本的用法。v-for中的item和items都可以任意改變，但是items必須與要渲染的數組名稱相同。因為我data中的數組名字是items所以我這裡也是寫的items。
先來看一下效果吧：
如果我們想要索引的話，就把v-for中的內容改為」（item，index） in items「即可。
       <ul>            <li v-for="(item,index) in items">               索引:{{index}},內容:{{item}}            </li>       </ul>
看一下效果：
在有些業務場景下，我們需要藉助索引的幫助。
上面我們講的是數組的渲染，下面我們說一下對象的渲染。
<div id="app">    <ul>        <li v-for="item in Students">            {{item.name}} - {{item.age}}        </li>    </ul></div><script type="text/javascript">    var app = new Vue({        el:'#app',        data:{            Students:[                {                    name:'Ray',                    age:18                },                {                    name:'Creator',                    age:20                },                {                    name:'Code',                    age:3                }            ]        },</script>
先看一下結果吧：
渲染對象的代碼形式和渲染數組很類似。我們在渲染數組的時候，插值表達式{{}}中只需要寫item即可，但是渲染對象的時候，需要{{item.屬性}}，其實還是比較簡單的。索引的用法和數組那裡一樣。
因為篇幅有限，我們只是舉了一個很小的例子，v-for的應用場景很廣泛，可以給我們優化掉很多的代碼量。
v-if
我們如何控制一個組件是否顯示？其實有很多方法，但是vue為我們提供的v-if非常好用。
基本代碼如下：
<div id="app">    <p v-if="msg">我被顯示了</p></div><script>    new Vue({        el:'#app',        data:{            msg:true        }    });</script>
我們在p標籤上寫了一個v-if，綁定了一個變量為msg。在data中，我們給msg賦值的布爾值true，所以，按理來說，這個p標籤會被顯示。
沒有問題。
v-if用法很簡單，但是應用場景也非常的廣泛，我們可以在很多的方法事件中，處理v-if綁定的變量值，用來控制組件的顯示與隱藏。這個指令是非常非常重要的。
v-show
說起v-show，其實它的作用和v-if是一樣一樣的。但是它們又有著根本上的區別，這個區別在面試中經常被問道。
我們先寫一下它的基本代碼格式：
<div id="app">    <p v-show="msg">我被顯示了</p></div><script>    new Vue({        el:'#app',        data:{            msg:true        }    });</script>
是不是和v-if一樣一樣的。
但是我們細細來觀察一下。當我們把msg的值改為false的時候，打開F12，看一下代碼。
頁面上確實沒有顯示出內容。但是！！！在DOM結構中，這個p標籤其實已經被掛載上去了，只是把CSS的display屬性值改為了none！！！
我們用同樣的操作，在看一下v-if的DOM結構。
在p標籤並沒有被掛載到DOM上！！！
所以這是v-if和v-show最根本的區別，敲下黑板。這個知識點在一些基礎面試中，出現率極高。
v-if和v-show都有各自的應用場景，大家可以仔細思考一下，根據它們的特點，什麼時候用v-if，什麼時候用v-show。值得思考一下。