uni-app入门-实战教程-十九-条件渲染

v-if 满足条件 view才显示

<view class="box-item" v-if = "isshow">1</view>

v-show 同 v-if ，相当于 v-if 增加了隐藏样式

<view class="box-item" v-show = "isshow">1</view>

{{age >30 ? '中年人' : '青少年' }} 三元运算符，如果满足条件就是第一个，不满足条件等于二个引号内容

 <view class="box-item" v-if="(age > 20)">{{age}}{{age >30 ? '中年人' : '青少年' }}</view>

v-if v-else-if else 判断性别使用

        <view class="box">
            <view class="box-item" v-if="1">男</view>
            <view class="box-item" v-else-if="2">女</view>
            <view class="box-item" else="3">未知</view>
        </view>
        <button @tap="changeSex()" class="button">修改性别</button>

<template>
    <view>
        <view class="box">
            <view class="box-item" v-if="isshow">1</view>
        </view>
        <button @tap="changeShow()" class="button">{{bttext}}</button>
        
        <!-- v-show 隐藏显示 -->
        <view class="box">
            <view class="box-item" v-show="isshow">1</view>
        </view>
        <button @tap="changeShow()" class="button">{{bttext}}</button>
        
        
        <view class="box">
            <view class="box-item" v-if="(age > 20)">{{age}}{{age >30 ? '中年人' : '青少年' }}</view>
        </view>
        <button @tap="changeage()" class="button">修改年龄</button>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                isshow:true,
                bttext: "隐藏",
                age: 18,
            }
        },
        onLoad() {

        },
        methods: {
            changeShow:function(){
                /* 如果issshow不等于 ture,那就赋值为 ture; */
                this.isshow =! this.isshow;
                if(this.isshow){
                    this.bttext = "隐藏";
                }else{
                    this.bttext = "显示";
                }
            },
            changeage:function(){
                this.age += 20;
            },
        }
    }
</script>

<style>
    .box{
        width: 100%;
        height: 500upx;
        border: 1upx solid #CCCCCC;
        /* 水平排列 */
        display: flex;      /* 自动换行 */
        /* flex-wrap: wrap-reverse; */
        /* 居中对齐 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
    
    
    .box-item{
        color: #FFFFFF;
        height: 200upx;
        width: 200upx;
        /* 行高 */
        line-height: 200upx;
        font-size: 30upx;
        /* 加粗 */
        font-weight: bold;
        text-align: center;
    }
    .box-item:nth-last-of-type(even){
        background: #007AFF;
    }
    .box-item:nth-last-of-type(odd){
        background: #09bb07;
    }
    .button{
        color: #007AFF;
    }
</style>

uni-app入门-实战教程-十九-条件渲染

推荐阅读更多精彩内容