Vue模版语法之条件渲染

云远121892024-02-21 18:34

1. v-show

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-show进行显示隐藏控件,true-->
        <div v-show="isTrue">显示标签</div>
        <!--使用v-show进行显示隐藏控件,''-->
        <div v-show="isNull">标签被隐藏</div>
        <!--使用v-show进行显示隐藏控件,false-->
        <div v-show="isFalse">标签被隐藏</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                isTrue:true,
                isNull:'',
                isFalse:false,
            }
        },
    }).mount('#root')
</script>

2. v-if

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-show进行显示隐藏控件,true-->
        <div v-if="isIf">隐藏标签</div>
        <div v-else-if="isElseIf">显示标签</div>
        <div v-else="isElse">隐藏标签</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                isIf:'',
                isElseIf:true,
                isElse:false,
            }
        },
    }).mount('#root')
</script>

3.注意点

1.当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

2.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

3.因为 v-if 是一个指令,我们可以在一个元素上使用 v-if

4.一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

5.v-show 不支持在元素上使用，也不能和 v-else 搭配使用。