【零基础学会uniapp系列】3、 条件渲染

项目部002

3、 条件渲染

v-if和v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

v-else 指令来表示 v-if 的“else 块”

在 JavaScript 中，（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。

<template>
        <view>
            <view v-if="seen">现在你看到我了</view>
            <view v-else>你看不到我了</view>
            <button @click="onclicked">点击切换</button>
        </view>
</template>
<script>
    export default {
        data() {
            return {
                seen: true
            }
        },
        methods: {
            onclicked() {
                this.seen = !this.seen;
            }
        }
    }
</script>

条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 template 元素当做不可见的包裹元素，并在上面使用 v-if。

<template v-if="seen">
    <view>标题</view>
    <view>内容：现在你看到我了</view>
</template>

v-show

这块内容只会在指令的表达式返回 真 值的时候被显示。

<view v-show="true">Hello!</view>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性的 display（可视） 。

注意，v-show 不支持 template 元素，也不支持 v-else。nvue 页面不支持 v-show。

本课引用链接

https://uniapp.dcloud.io/vue-basics?id=condition

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：326576256

视频教程在线观看：https://www.eyuyan.tv/?mod=play&tvid=3208

课程课件和源码下载：【从资源网下载】
从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn

空竹

来了

冰点

来了