uni中使用v-show/v-if，使点击按钮改变文字

我是有一个点击签到，点完之后，签到按钮变成已签到的效果。

然后我在button按钮中，写了一个v-show：

<button v-show="showUp" type="primary" @click="toggle('center')" style="background: #F7B500;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">立即签到</button>

在此还有一个点击之后出现一个弹出层，

<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true">
          <view class="recom-popup">
                   <view class="recom-popup-text1">积分+10</view>
                   <view class="recom-popup-text2">签到成功</view>
           </view>
  </uni-popup>

toggle的方法写的是：

toggle(type) {
                this.type = type
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup.open(type)
            }

效果如下图：

 

完整代码是：

<view class="recom_tuan">
             <button v-show="showUp" type="primary" @click="toggle('center')"  style="background: #F7B500;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">立即签到</button>
             <button v-show="!showUp" type="primary"
                        style="background: #999999;color: #FFFFFF;width: 188rpx;height: 72rpx;font-size: 26rpx;">已签到</button>
             <uni-popup ref="popup" :type="type" :animation="false" :maskClick="true">
                        <view class="recom-popup">
                            <view class="recom-popup-text1">积分+10</view>
                            <view class="recom-popup-text2">签到成功</view>
                        </view>
              </uni-popup>
  </view>

export default {
        data() {
            return {
                type: 'center',
                showUp:true,
            }
        },
        methods: {
            toggle(type) {
                this.type = type
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup.open(type)
                this.showUp = !this.showUp
            }
        }
    }

原文地址：https://www.jb51.cc/wenti/3285994.html