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

v-if和v-else

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

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

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

<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。

课程视频教程：

03. 条件渲染

Uniapp问答互助学习交流群：

Uniapp问答互助学习交流群：326576256

旨在相互学习交流，相互帮助解答使用Uniapp时遇到的问题