当前位置: 首页 > news >正文

uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

一、实现效果:

在这里插入图片描述

二、代码实现:

不适用官方的change方法,自己定义点击方法。
动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null

<template><view><radio-group><view v-for="(item, index) in list" :key="index"><radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio><view>{{item.value}}</view></view></radio-group></view>
</template><script>export default {data() {return {list: [{value: '选项1',id: '1'},{value: '选项2',id: '2'},{value: '选项3',id: '3'}],radioValue: ''}},methods: {//自定义单选按钮的点击方法radioCheck(index) {this.list.forEach((item => {item.isCheck = false}))if (this.radioValue == this.list[index].id) {this.radioValue = null} else {this.radioValue = this.list[index].id}console.log(this.radioValue)}}}
</script>

OK~

http://www.lryc.cn/news/145492.html

相关文章:

  • 【Qt专栏】实现单例程序,禁止程序多开的几种方式
  • 力扣26. 删除有序数组中的重复项
  • 【机器学习】鸢尾花分类-逻辑回归示例
  • Flink CDC介绍
  • Java集合sort排序报错UnsupportedOperationException处理
  • 安防监控/磁盘阵列存储/视频汇聚平台EasyCVR调用rtsp地址返回的IP不正确是什么原因?
  • Spring boot开启定时任务
  • package.json相关知识记录
  • VueRouter使用详解(5000字通关大全)
  • vue axios实现下载文件及responseType:blob注意事项
  • StringBuilder类分享(1)
  • Qt 打开文件列表选择文件,实现拖拽方式打开文件
  • [C/C++]天天酷跑游戏超详细教程-上篇
  • 5G NR:RACH流程 -- Msg1之选择正确的PRACH时频资源
  • 在vue3项目中编辑的时候,解决对话框里边的数据和列表中的数据联动了。深复制
  • 循环结构(个人学习笔记黑马学习)
  • ceph中PGLog处理流程
  • macOS使用命令行连接Oracle(SQL*Plus)
  • Mac下使用Homebrew安装MySQL5.7
  • centos安装Nginx配置Nginx
  • Linux环境下搭建使用缓存中间件Redis
  • Oracle 本地客户端连接远程 Oracle 服务端并使用 c# 连接测试
  • java中上传文件先下载到本地再上传还有就是直接通过文件流url地址进行上传优缺点?
  • 华为复合vlan(mux vlan)
  • 第62步 深度学习图像识别:多分类建模(Pytorch)
  • GPT带我学-设计模式-适配器模式
  • Pyecharts教程(七):使用pyecharts创建堆叠柱状图的示例
  • C++中的强制转换的常用类型及应用场景详解
  • ubuntu调整时区
  • mybatis:动态sql【2】+转义符+缓存