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)       
}    
}

}

可以拿去直接用

猜你喜欢

转载自www.cnblogs.com/create-l/p/12660686.html