美文网首页
uni-app 开发APP动态设置check-box的选中

uni-app 开发APP动态设置check-box的选中

作者: 朝云幕雪 | 来源:发表于2020-08-12 10:59 被阅读0次

在我们使用uni-app框架开发的时候可能会有这么一场景就是通过业务代码动态来设置check-box的选中,可以按以下方式做。

  1. 首先编码实现checkBox选择变量和UI布局标签
    ...
    <checkbox-group @change="checkBoxmA">
    <checkbox value ='0' :checked="allCk" style="position: absolute; top: 0upx;left: 10upx;">
    </checkbox>
    </checkbox-group>
    <button @tab='tapCheck()'> 取消选中</button>
    ..
    2.实现js业务逻辑代码
    A:设置checkBox初始化为未选中
    data(){
    return {allCk:false}
    }
    B.实现监听checkBoX值变化方法
    checkBoxmA(e){
    if(e.detail.value=='0'){
    this.allCk = true
    }else{
    this.allCk = false
    }
    }
    注意:当value=='0'时为选中,需要设置选中变量allCk的值。不然后面动态设置allCk时候checkBox的选中状态不会变。
    C.实现代码设置CheckBox为未选中
    tapCheck(){
    this.allCk = false //设置false是未选中,设置true为选中
    }

相关文章

网友评论

      本文标题:uni-app 开发APP动态设置check-box的选中

      本文链接:https://www.haomeiwen.com/subject/jkspdktx.html