Vue入门指南（5）

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在控制台不会渲染。