用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) } } }
可以拿去直接用