Vue 条件渲染

Vue 条件渲染：v-show、v-if、v-else、v-else-if

v-show

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

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2 v-show="false">{{msg}}</h2>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: '你好',
        }
    })
</script>
</html>

v-if

写法：

v-if="表达式"
v-else="表达式"
v-else-if="表达式"

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

适用于：切换频率较低的场景

注意：v-if 可以和 v-else、v-else-if 一起使用，但结构不能被打断

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2 v-if="false">{{msg}}</h2>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: '你好',
        }
    })
</script>
</html>

v-else 和 v-else-if

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    <h2 v-show="false">{{msg}}</h2>-->
    <!--    <h2 v-if="false">{{msg}}</h2>-->
    <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>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: '你好',
            n: 0
        }
    })
</script>
</html>

template 和 v-if

template 不会破坏 v-if 结构

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>n = {{n}}</h2>
    <button @click="n++">n + 1</button>

    <template v-if="n===1">
        <h2>张三</h2>
        <h2>李四</h2>
        <h2>王五</h2>
    </template>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: '你好',
            n: 0
        }
    })
</script>
</html>

posted @ 2022-04-10 08:57 春暖花开鸟阅读(40) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 内置指令 v-html

· Vue 事件修饰符

· Vue条件渲染

· Vue学习笔记18--条件渲染

· Vue.js 条件渲染