简书链接:uniappcheckbox值的改变控制同步到变量办法
文章字数：353,阅读全文大约需要1分钟
刚开始以为:checked 或 : value能改变双向绑定，后面经过测试 是不行的，最后的实现check之后改变变量的办法如下:

1
2
3
4
5
<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

1
2
3
4
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

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

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

然后进行取反即可

1
2
3
4
	onCheckBoxChange(e){
				console.log(e)
				this.cancel=!this.cancel
},

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

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

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

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

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