Vue 条件渲染

简介

在某些场景下，页面中同一个位置可能需要展示两种或多种不同的信息结构布局，此时，可以通过 Vue 中提供的条件渲染实现。

条件渲染，就是在一个指定的条件下，渲染出指定的UI，在显示某些页面时，让元素只在特定条件下进行显示。

在 Vue3 中，UI 元素的显示和隐藏可以通过 v-if 和 v-show 两个指令来实现。

v-if 指令

Vue 中的 v-if 指令和其它编程语言中的 if 条件控制语句一样，也可以搭配 else 和 else if 形式进行组合使用。

v-if 使用

当 v-if 指令中指定的条件成立时，则渲染该元素，否则什么也不做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp, ref} = Vue

        window.onload = function(){
            createApp({
                setup() {
                    const flag = ref(true)
                    return{
                    flag
                    }
                }
            }).mount('#app');
        }
      </script>
</head>
<body>
    <div id="app">
        <div v-if="flag">
            <h1>v-if 条件为真时渲染元素</h1>
        </div>
        <hr>
        <button @click="flag = !flag"> 切换 </button>
    </div>
</body>
</html>

v-if 及 v-else

v-if 和 v-else 这两个指令类似于其他编程语言中的if else语句。

当满足 v-if 条件时，就会展示对应的一个内容，不满足时，会展示 v-else 中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp, ref} = Vue

        window.onload = function(){
            createApp({
                setup() {
                    const flag = ref(true)
                    return{
                    flag
                    }
                }
            }).mount('#app');
        }
      </script>
</head>
<body>
    <div id="app">
        <div v-if="flag">
            <h1>v-if 条件为真时渲染元素</h1>
        </div>
        <div v-else>
            <h1>v-else 条件为真时渲染元素</h1>
        </div>
        <hr>
        <button @click="flag = !flag"> 切换 </button>
    </div>
</body>
</html>

v-if 及 v-else-if 及 v-else

v-if 指令也可以搭配 v-else-if 指令，实现多条件渲染。

v-else 指令并不是必须的，可根据实际情况选择使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp, ref} = Vue

        window.onload = function(){
            createApp({
                setup() {
                    const flag = ref("A")

                    function change(){
                        if(flag.value == "A")
                            flag.value = "B"
                        else if(flag.value == "B")
                            flag.value = "C"
                        else if(flag.value == "C")
                            flag.value = "D"
                        else if(flag.value == "D")
                            flag.value = "A"
                        alert(flag.value)
                    }
                    return{
                        flag,
                        change
                    }
                }
            }).mount('#app');
        }
      </script>
</head>
<body>
    <div id="app">
        <div v-if="flag == 'A'">
            <h1>AAAAA</h1>
        </div>
        <div v-else-if="flag == 'B'">
            <h1>BBBBBB</h1>
        </div>
        <div v-else-if="flag == 'C'">
            <h1>CCCCC</h1>
        </div>
        <div v-else>
            <h1>DDDDD</h1>
        </div>
        <hr>
        <button @click="change"> 切换 </button>
    </div>
</body>
</html>

v-show 指令

v-show 是根据表达式的值，切换元素的 display 的 css 的属性值。

与 v-if 不同的是，如果条件为假时，v-if 不会创建当前元素，而 v-show 不管元素是否显示，该元素都会创建。

v-show 指令是一个独立的指令，不能和 v-else 结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const {createApp, ref} = Vue

        window.onload = function(){
            createApp({
                setup() {
                    const flag = ref(true)

                    return{
                        flag
                    }
                }
            }).mount('#app');
        }
      </script>
</head>
<body>
    <div id="app">
        <hr>
        <div v-show="flag" class="show">
            <h1>AAAAA</h1>
        </div>

        <hr>
        <button @click="flag = !flag"> 切换 </button>
    </div>
</body>
</html>

当 v-show 的变量值为 false 时，元素不显示，并且 display 属性被动改为 none，仍然可以在 HTML 元素结构中看到 div 标签的存在。

总结

v-if 通过操纵 DOM 元素来进行切换显示
- 表达式的值为 true 时，元素存在于 DOM 树中。
- 表达式的值为 false 时，元素从 DOM 树中移除。
v-show 只是简单控制 DOM 元素的 display 属性：
- 渲染 HTML 元素，符合条件时显示，不符合条件 display 为 none ，元素还在 DOM 树。