首页 > 其他分享 >Uniapp开发中实现单选checkbox的正确方式

Uniapp开发中实现单选checkbox的正确方式

时间:2024-03-13 15:32:48浏览次数:27  
标签:Uniapp checkbox group uniapp value 单选 uni

遇到这种单选是否的需求,你肯定会想这还不简单,放一个checkbox就行,然后想当然的这样用:

<checkbox v-model="value" />

但其实在uniapp里是不能直接写的!结果勾选时value的值并没有变化。尝试了加一个:checked绑定也不行。而uni-data-checkbox又只适用于多选的情况。

之后我想起到uniapp文档的内置组件里找checkbox

checkbox-group | uni-app官网uni-app,uniCloud,serverless,checkbox-group,checkboxicon-default.png?t=N7T8https://uniapp.dcloud.net.cn/component/checkbox.html最终得出的写法是:

<checkbox-group @change="checkboxChange">
    <checkbox value="true" :checked="value"/>
</checkbox-group>
checkboxChange(e) {
	this.value = e.detail.value[0]
}

1.需要放在checkbox-group里。

2.默认值用:checked绑定,选中的值用value定义,因为只有一个是否选中,这里是true,如果:value="true"这样也能用,但是会有警告类型不对。

3.未选中时change事件里拿到的就是空数组。

标签:Uniapp,checkbox,group,uniapp,value,单选,uni
From: https://blog.csdn.net/qq_34718221/article/details/136680904

相关文章

  • 在UniApp中实现对接PayPal支付
    基本的指南:获取PayPalAPI凭证:首先,你需要在PayPal开发者中心注册并创建一个应用。这将为你提供必要的API凭证,如ClientID和Secret,用于与PayPal的API进行通信。配置UniApp项目:在你的UniApp项目中,你需要配置PayPal的相关信息。这通常包括在manifest.json文件中设置支付相关......
  • uniapp封装公共分享方法
    使用mixins封装分享方法创建share.jsimporturlConfigfrom"@/utils/urlConfig";exportconstshareMixins={data(){return{shareData:{title:'',//分享内容的标题path:'',//分享内容跳转......
  • uniapp自定义导航栏
    uniapp项目自定义顶部导航栏1.创建组件完整代码navigation.vue<template><viewclass="navbar-header":style="isfixed?'padding-top'+navHeight+'px':'padding-top:0px'"><viewclass="navbarcustom......
  • uniapp清除指定key缓存
    清除缓存onLaunch:function(){console.log('AppLaunch')constpreservedKeys=['ishowFixPre','readTime']try{const{keys}=uni.getStorageInfoSync()keys.forEach((key)=>......
  • 关于uniapp调用支付宝登录问题
    uniapp的uni.login的provider不支持支付宝但是呢,我看插件市场都要钱这个还需要钱吗你直接硬写呗,支付宝比如登录官方时这么写的ok 我们在uniapp上也这么写就行了button调用一键登录uniapp不会报错,然后我们发行打包到支付宝的开发工具里经测试可以正常使用 返回 ......
  • 复选框——QCheckBox
    简介这个组件是一个界面上的复选框示例代码fromPySide6.QtWidgetsimportQApplication,QWidget,QCheckBox,QVBoxLayout,QPushButtonclassMyCheckBox(QWidget):def__init__(self):super().__init__()#Mark基本使用checkbox=QCheckBox......
  • fastadmin 多选,单选,不选
    文档https://static.kancloud.cn/wangzhaozhen/fastadmin/2291938多选<divclass="form-group"><labelclass="control-labelcol-xs-12col-sm-4">{:__('拒绝原因')}:</label>......
  • UnicheckBox左侧选择框显示问题!!!
    UnicheckBox左侧选择框有时显示、有时不显示,是一个BUG啊。试了后发现,改变一下程序uses列表顺序,可解决这个问题:unitabcc;interfaceusesWindows,Messages,SysUtils,Variants,Classes,Graphics,Controls,Forms,DateUtils,uniPanel,uniGUIBaseClasses,uniGUIFrame,uni......
  • uniapp开发微信小程序,动态排列组件的解决方案。
    微信小程序开发里面,并不支持<component:is="item",虽然微信小程序提供了WXML提供模板(template),对于uniapp并不管用,编译后,所以解决方案,只有目前(截止2022-04-15)只有两个:1.使用v-if,遍历组件,判断位置,来显示组件,达到排列要求2.第二种没那么麻烦,比较神奇,使用flex布局的order属性,外层......
  • uniapp 中 this.$refs 无法获取组件
    先排除这些原因:https://segmentfault.com/q/1010000043755258https://ask.dcloud.net.cn/question/71788https://www.cnblogs.com/e0yu/p/16135985.htmlhttps://blog.csdn.net/m0_50015961/article/details/112170523总结一下就是:ref不能引用view内置组件、循环创建的自......