什么是条件渲染？

条件渲染是指根据一定的条件来决定是否渲染某个组件或元素。在UniApp中，条件渲染通常使用v-if、v-else-if和v-else指令来实现。

v-if 指令

v-if指令用于根据表达式的真假值来有条件地渲染一个元素。如果表达式的值为真，则渲染该元素，否则不渲染。

<view v-if="condition">
    条件为真时显示的内容
</view>

v-else-if 和 v-else 指令

你可以使用v-else-if指令来添加一个条件块，该条件块会在前一个v-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>

案例讲解：显示不同状态的按钮

假设我们有一个按钮，根据用户的不同状态显示不同的文本。

首先，我们在页面的data中定义一个状态：

data() {
    return {
        userStatus: 'pending' // 可以是 'pending', 'approved', 'rejected'
    };
}

然后，我们在模板中使用条件渲染来显示不同的按钮文本：

<view>
    <button v-if="userStatus === 'pending'">待审核</button>
    <button v-else-if="userStatus === 'approved'">已批准</button>
    <button v-else>已拒绝</button>
</view>

这样，当userStatus的值变化时，按钮上显示的文本也会相应地变化。