Vue学习笔记 - 条件渲染与列表渲染

条件渲染

v-if

在使用 v-if 控制元素的时候，我们需要将它添加到这个元素上去。然而如果要切换很多元素的时候，一个个的添加就太麻烦了。这时候就可以使用 <template> 将一组元素进行包裹，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。

<div id="app">
    <!-- ok为true显示 为false则不显示 -->
    <template v-if="ok">
        <h3>Title</h3>
        <p>Paragraph 1</p>
    </template>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        ok: true
    }
})
</script>

v-else

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div id="app">
    <!-- 如果ok为true 第一个div显示 第二个隐藏 -->
    <!-- 如果ok为false 第一个div隐藏 第二个显示 -->
    <div v-if="ok">Hello...</div>
    <div v-else>World...</div>

    <div v-if="num == 10">num = {{num}}</div>
    <div v-else>num != 10</div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        ok: false,
        num: 10
    }
})
</script>

v-else-if

类似于 v-else，v-else-if也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<div id="app">
    <!-- 返回条件成立的内容 并退出判断 -->
    <div v-if="num > 10">num = {{num}}</div>
    <div v-else-if="num > 5">num > 5</div>
    <div v-else-if="num < 5">num < 5</div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        num: 11
    }
})
</script>

用 key 管理可复用的元素

以下说明示例中的2个两个模板使用了相同的元素，如果我们不想让他们重复使用，只需添加一个具有唯一值的 key 属性即可

<div id="app">
    <template v-if="loginType === 'username'">
        <label>UserName </label>
        <input type="text" placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email </label>
        <input type="text" placeholder="Enter your email address">
    </template>
    <input v-on:click="btn" type="button" value="切换">
</div>
<script>
new Vue({
    el: '#app',
    data: {
        loginType: 'username'
    },
    methods: {
        btn: function(){
            if(this.loginType === "username"){
                this.loginType = "email"
            }else{
                this.loginType = 'username'
            }
        }
    }
})
</script>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
现在，每次切换时，输入框都将被重新渲染

<div id="app">
    <template v-if="loginType === 'username'">
        <label>UserName </label>
        <input key="username-input" placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email </label>
        <input key="email-input" placeholder="Enter your email address">
    </template>
    <input v-on:click="btn" type="button" value="切换">
</div>
<script>
new Vue({
    el: '#app',
    data: {
        loginType: 'username'
    },
    methods: {
        btn: function(){
            if(this.loginType === "username"){
                this.loginType = "email"
            }else{
                this.loginType = 'username'
            }
        }
    }
})
</script>