11_Vue条件渲染

最新推荐文章于 2025-12-13 16:25:56 发布

原创最新推荐文章于 2025-12-13 16:25:56 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #servlet

Vue2笔记专栏收录该内容

31 篇文章

订阅专栏

文章介绍了Vue中用于条件渲染的指令v-if和v-else-if，以及v-else的使用方法。v-if适用于切换频率低的情况，它会直接移除不显示的DOM元素；而v-show适合切换频繁的场景，元素不会被移除，只是隐藏。此外，还展示了v-if与v-show结合template使用的方式。

Vue条件渲染

1.V-if

(1).v-if="表达式"

(2).V-else-if="表达式"

(3).V-else="表达式"适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除。

注意: v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-if可以搭配template使用，不会改变结构，template不能把和v-show搭配使用。

2.V-show

写法:v-show="表达式"

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id='root'>
        <!--使用 v-show 做条件渲染-->
        <h2 v-show="false">欢迎{{name}}</h2>
        <h2 v-show="1===2">欢迎{{name}}</h2>

        <!--使用 v-if 做条件渲染-->
        <h2>当前n的值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <h2 v-if="n===1">朱雀</h2>
        <h2 v-if="n===2">玄武</h2>
        <h2 v-if="n===3">青龙</h2>
        <h2 v-if="n===4">白虎</h2>

        <!--使用 v-if和v-else-if 做条件渲染-->
        <h2>当前n的值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <h2 v-if="n===1">朱雀</h2>
        <h2 v-else-if="n===2">玄武</h2>
        <h2 v-else-if="n===3">青龙</h2>
        <h2 v-else>白虎</h2>

        <!-- v-if和template的配合使用 template不会改变结构-->
        <template v-if="n===1">
        <h2>朱雀</h2>
        <h2>玄武</h2>
        <h2>青龙</h2>
        <h2>白虎</h2>
        </template>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '朱雀大人',
                n: 0
            }
        })
    </script>
</body>

</html>