A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2019-12-23 17:44  /  1173 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

Vue.js 条件语句
一、v-if指令
在html标签中使用v-if=" ",Vue会对" "(引号)中的内容进行计算,并通过计算结果,判断标签内容是否可见

实例:v-if 实例

<div id="app">
    <p v-if="seen">hello!</p>
    <button @click="seen = !seen">点击按钮显示或隐藏"hello!"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

在上述实例中:

通过<button>来控制seen的属性值

v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

二、v-else指令
我们可在拥有v-if或v-else-if指令的html元素后,紧跟一个带有v-else的元素。用作 v-if 的 “else” 块

实例:v-else 实例

<div id="app">
    <p v-if="seen">true</p>
    <p v-else>false</p>
    <button @click="seen = !seen">点击按钮切换显示标签"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

三、v-else-if指令
我们可在拥有v-if或v-else-if指令的html元素后,紧跟一个带有v-else-if的元素。用作 v-if 的 “else-if” 块。可以链式的多次使用

实例:v-else-if 实例

<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
</script>

注意: v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后。

四、v-show指令
我们也可以使用 v-show 指令来根据条件展示元素:

Vue会对v-show = " "中的内容进行运算,若得出的结果为true则进行显示,若为false则不显示

实例:v-show 实例

<div id="app">
    <p v-show="seen">hello!</p>
    <button @click="seen = !seen">点击按钮显示或隐藏"hello!"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马