uniapp 條件渲染

條件語句：
v-if v-else-if v-else
v-show

示例代碼

<template>
    <view>
       <template v-if="isshow">
       	<view class="content">
       	     <view class="box" v-if="(age>20)">{{ age>30?'中年人':'年輕人' }} {{age}}</view>
       	     <view class="btn">
       	         <button type="default"   @tap="changeAge()">增加</button>
       	         <button type="default"    @tap="deleteAge()">減少</button>
       	     </view>
       	 </view> 
       	</template>
       	<template v-else>
       		<view class="box" style="background: #09BB07;">box2</view>
       	</template>
       
       <button type="default" @tap="changeShow()">隱藏</button>
    </view>
     
</template>

<script>
    export default {
        data() {
            return {
                isshow: false,
                age: 27,
               
            }
        },
        methods: {
            changeShow: function() {
                this.isshow = !this.isshow;
            },

            changeAge: function() {
                this.age += 1;
            },
            deleteAge: function() {
                this.age -= 1;
            },


        }
    }
</script>

<style>
    .box {
        background: pink;
        color: #FFFFFF;
        font-size: 50upx;
        width: 350upx;
        height: 350upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box1{
        background: #1AAD19;
        color: #FFFFFF;
        font-size: 50upx;
        width: 350upx;
        height: 350upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn {
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>