和阿牛一起冲Vue


文章目录


前言

青春，因为奋斗与奉献更美丽。

【Vue】基础系列（十一）条件渲染-—v-if，v-show,v-else,template语法详解_vue.js

条件渲染：

1.v-if

写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注

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

v-if与template配合使用

template配合v-if使用，可以减少被动的模块显示。

【Vue】基础系列（十一）条件渲染-—v-if，v-show,v-else,template语法详解_vue.js_02


代码示例：

<!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>
</head>

<body>
    <div id="root">
        <h2>难道这就是你的分开的理由</h2>
        <!-- <h3 v-show="false">如果{{message.muisc}}</h3> -->
        <!-- <h3 v-show="1===3">如果{{message.muisc}}</h3> -->

        <!-- 比较狠的v-if -->
        <h3 v-if="true">如果{{message.muisc}}</h3>
        <div>{{n}}</div>
        <h4 v-if="n === 1">放开了手</h4>
        <h4 v-if="n === 2">再也握不住你的手</h4>
        <h4 v-if="n === 3">再也没有的以后喔</h4>
        <br />
        <!-- 也有v-else-if更加搞笑 v-else-->
        <h4 v-show="n === 1">放开了手</h4>
        <h4 v-show="n === 2">再也握不住你的手</h4>
        <h4 v-show="n === 3">再也没有的以后喔</h4>

        <!-- template -->
        <template v-if="n === 2">

            <h5>我nima\(^o^)/~</h5>
            <h5>我nima\(^o^)/~</h5>
            <h5>我nima\(^o^)/~</h5>

        </template>


        <button @click="n++">点击我n++</button>
    </div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            name: 'jack',
            message: {
                url: 'javascript:void(0)?spm=1000.2115.3001.5343',
                name: '勇敢牛牛',
                muisc: '爱能重新来过,你会不会爱我'
            },
            n: 0
        }
    });</script>

</html>