条件渲染简介

在uni-app中，条件渲染是指根据表达式的真假值来切换元素的渲染或隐藏。条件渲染有两种方式：v-if 和 v-show。

v-if

v-if 指令用于条件性地渲染一个元素。如果表达式的值为真，则渲染该元素及其内容；如果为假，则不渲染。

<view v-if="condition">内容</view>

v-else-if 和 v-else

v-else-if 指令必须紧跟在 v-if 或 v-else-if 元素之后，v-else 指令则必须放在 v-if、v-else-if 之后。

<view v-if="condition1">条件1内容</view>
<view v-else-if="condition2">条件2内容</view>
<view v-else>其他内容</view>

v-show

v-show 指令根据表达式的真假值来切换元素的显示和隐藏。与 v-if 不同，v-show 只是简单地切换元素的 CSS 属性 display。

<view v-show="condition">内容</view>

案例讲解

下面是一个简单的示例，演示如何在 uni-app 中使用条件渲染。

示例代码

首先，我们创建一个简单的页面，包含两个按钮和一个用于显示信息的视图。

<template>
    <view>
        <button @click="showMessage = true">显示信息</button>
        <button @click="showMessage = false">隐藏信息</button>
        <view v-if="showMessage" class="message">
            这是一条显示的信息。
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showMessage: false
        };
    }
};
</script>

<style>
.message {
    margin-top: 20px;
    padding: 10px;
    background-color: #e0f7fa;
    border: 1px solid #81d4fa;
    border-radius: 4px;
}
</style>

在这个示例中，我们有两个按钮，一个用于显示信息，另一个用于隐藏信息。点击按钮时，会改变 `showMessage` 的值，从而控制信息的显示和隐藏。