v-if 和 v-show

直接看v-if例子來

<h1> v-if 和 v-show </h1>
<div id="vue-app">
        <button v-on:click="error=!error">Error</button>
        <button v-on:click="ok=!ok">Ok</button>
        <p v-if="error">網路連線錯誤：404</p>
        <p v-else-if="ok">網路連線成功：200</p
 
>
</div>

<script src="vue.js"></script>
<script>
        new Vue({
            el: '#vue-app',
            data: {
                error: false,
                ok: false
            }
        });
</script>

我們會看到，當條件為真時，p存在於DOM中，為假時，p完全不存在。這是因為v-if是真實的條件渲染，它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子元件。有更高的切換消耗。
再來看看v-show

<p v-if="show">網路連線錯誤：404</p>
<p v-else-if="show">網路連線成功：200</p>

在v-show中，僅僅改變的是p的display。因為v-show只是簡單地基於 CSS 切換。有更高的初始渲染消耗。
所以，需要頻繁切換時用v-show，如果在執行時條件不大可能改變則用v-if。

v-for

<h1>for迴圈</h1>
<div id="vue-app">
        <ul>
            <li v-for="word in words">
                {{word}}
            </
 
li>
        </ul>

        <template v-for="(user,index) in users">
            <p>{{index}}.{{user.name}}.{{user.age}}</p>
        </template>
</div>
<script src="vue.js"></script>
<script>
        new Vue({
            el: "#vue-app",
            data: {
                words: ["apple", "pear", "banana"],
                users: [{
                        name: "huijiao",
                        age: 20
                    },
                    {
                        name: "mimi",
                        age: 21
                    },
                    {
                        name: "shizhentao",
                        age: 22
                    }
                ]
            }
        })
</script>

在這裡我需要說一點，遍歷users陣列時我們用到了template標籤，開啟控制檯我們發現實際上並沒有這個標籤。因為template在控制檯不會渲染。