uniapp checkbox 值的改变控制同步到变量办法

刚开始以为:checked 或 : value能改变双向绑定，后面经过测试 是不行的，最后的实现check之后改变变量的办法如下:

<checkbox-group @change="onCheckchange" class="appsize">
            
        <checkbox value="cancel" :checked="cancel" activeBorderColor="#005fff" :value="cancel">取消</checkbox>
        <checkbox value="lock" :checked="lock" activeBorderColor="#005fff"  style="margin-left: 10px;">锁定</checkbox>
        </checkbox-group>

onCheckchange

onCheckchange(e){
                this.cancel=e.detail.value.includes("cancel")
                this.lock=e.detail.value.includes("lock")
            },

第一次的初始化用的 checked="lock" 之后的改变同步到变量需要用到onCheckchange 读取e.detail.value 如果有checkbox选中会返回选中的value数据，因此可以利用此判断。

image.png

第二种办法
只监听点击事件

<checkbox activeBorderColor="#005fff" @click="onCheckBoxChange" :checked="cancel" >
取消模式</checkbox>

然后进行取反即可

onCheckBoxChange(e){
                console.log(e)
                this.cancel=!this.cancel
},

不过此方法不敢保证一定是靠谱的的，因为为确保不会出错我直接测试弄了一个按钮，直接改变了this.cancel=true，会发现check也会变成选中，因此应该是靠谱的。 cancel的值一定会同步到checkbox上。

<button @click="() => { this.cancel = true }">ff</button>

因此直接简化后变成这样更方便

<checkbox activeBorderColor="#005fff" @click="()=>{
                    this.cancel=!this.cancel
            }" :checked="cancel" >取消模式</checkbox>

尽管有人认为这样写不规范，但是有些东西能直面看到，更为有效，全部封装到其他地方不方便直接管理控制代码，就好比网络请求url,把url的地址提取封装到变量也是如此。