zoukankan      html  css  js  c++  java
  • uni-app在小程序中v-show指令失效

    用uni-app写了一段发送验证码的代码

    <view class="cu-form-group">
    <view class="title">验证码</view>
    <input placeholder="请输入验证码" name="input" v-model="code"></input>
    <button class='cu-btn bg-green shadow' v-show:="show '" @click="getCode">发送</button>
    <button class='cu-btn line-grey shadow' v-show:="!show'">{{count}}s</button>
    </view>

    在浏览器中能够正常运行,改成在支付宝小程序模拟器中跑了一遍,发现v-show指令失效,第二个button也显示出来了

    于是改用:style

    <view class="cu-form-group">
    <view class="title">验证码</view>
    <input placeholder="请输入验证码" name="input" v-model="code"></input>
    <button class='cu-btn bg-green shadow' :style="show ? '' : 'display:none;'" @click="getCode">发送</button>
    <button class='cu-btn line-grey shadow' :style="!show ? '' : 'display:none;'">{{count}}s</button>
    </view>

    当然这里也可以使用 :class 应该也能达到一样的效果

    附上我的methods

    methods: {
    getCode() {
    const TIME_COUNT = 60;      
    if (!this.timer) {        
    this.count = TIME_COUNT;        
    this.show = false;        
    this.timer = setInterval(() => {        
    if (this.count > 0 && this.count <= TIME_COUNT) {          
    this.count--;         
    } else {          
    this.show = true;          
    clearInterval(this.timer);          
    this.timer = null;         
    }        
    }, 1000)       
    }    
    }
    
    }

    可以拿去直接用

  • 相关阅读:
    odoo邮箱系统
    运行odoo13,走的odoo12的数据库
    字段`in_group_69`不存在
    odoo库存
    Codeforces 1430E
    AtCoder "Regular Contest 102" D
    AtCoder "Grand Contest 041" E
    ZJNU 2471
    ZJNU 2455
    Codeforces 1426F
  • 原文地址:https://www.cnblogs.com/create-l/p/12660686.html
Copyright © 2011-2022 走看看