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.hqwc.cn/news/99358.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【广州华锐互动】利用AR远程指导系统进行机械故障排查,实现远程虚拟信息互动

随着工业自动化和智能化的不断发展&#xff0c;机械故障诊断已经成为了工业生产中的重要环节。为了提高故障诊断的准确性和效率&#xff0c;近年来&#xff0c;AR&#xff08;增强现实&#xff09;远程协助技术逐渐应用于机械故障诊断领域。本文将探讨AR远程协助技术在机械故障…

docker打包vue vite前端项目

打包vue vite 前端项目 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功&#xff08;黄的也不知道是啥&#xff09; 打包好的前端文件放入 4.配置 default.conf upstream wms-app {server 你自己的ip加端口 ;server 192.168.xx.xx:8080 ; } server { …

mysql数据库使用技巧整理

查看当前数据库已建立的client连接 mysql中执行 -- 查看数据库允许的最大连接数&#xff0c;不是实时正在使用的连接数 SHOW VARIABLES LIKE max_connections; mysql中执行 -- 查看当前数据库client的连接数 SHOW STATUS LIKE Threads_connected; mysql中执行 -- 查看具…

Linux中安装MySQL5.7.42

1. 首先&#xff0c;下载mysql5.7.42的安装包&#xff08;下方是下载地址&#xff09;&#xff0c;选择红色框框的下载&#xff08;注意的是&#xff0c;这个链接只提供5.7的版本下载&#xff0c;可能还会更新&#xff0c;不一定打开就是5.7.42的版本&#xff0c;后续可能会有4…

LeetCode 热题 100——找到字符串中所有字母异位词(滑动窗口)

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 该题目的意思简而言之就是说&#xff0c;从s字符串中寻找与p字符串含有相同字符(次数和种类均相同)的子串&#xff0c;并且将他们的首字符下标集合进数组中进行返回。 滑动窗口解…

AndroidTV端:酒店扫码认证投屏DLNA

被老板叼了几次了&#xff0c;最近实在忍不了&#xff0c;准备离职&#xff1b; 但是担心离职后长时间没有办法找到工作 就想贡献一套平时琢磨出来的程序&#xff0c;请各位有能力的话带我熬过这凛冽的寒冬。 目前写出来的&#xff0c;有三个端&#xff1a;安卓TV端&#xf…

【Windows 常用工具系列 11 -- 笔记本F5亮度调节关闭】

文章目录 笔记本 F 按键功能恢复 笔记本 F 按键功能恢复 使用笔记本在进行网页浏览时&#xff0c;本想使用F5刷新下网页&#xff0c;结果出现了亮度调节&#xff0c;如下图所示&#xff1a; 所以就在网上查询是否有解决这个问题的帖子&#xff0c;结果还真找到了&#xff1a;…

java IO流(三) 转换流 打印流

转换流 前面我们学习过FileReader读取文件中的字符&#xff0c;但是FileReader默认只能读取UTF-8编码格式的文件。如果使用FileReader读取GBK格式的文件&#xff0c;可能存在乱码&#xff0c;因为FileReader遇到汉字默认是按照3个字节来读取的&#xff0c;而GBK格式的文件一个…

【微服务部署】三、Jenkins+Maven插件Jib一键打包部署SpringBoot应用Docker镜像步骤详解

前面我们介绍了K8SDockerMaven插件打包部署SpringCloud微服务项目&#xff0c;在实际应用过程中&#xff0c;很多项目没有用到K8S和微服务&#xff0c;但是用到了Docker和SpringBoot&#xff0c;所以&#xff0c;我们这边介绍&#xff0c;如果使用Jenkinsjib-maven-plugin插件打…

数据结构day7栈-顺序栈的实现

用指针比用数组好&#xff0c;这样用户可以自己指定空间的大小&#xff0c;有参与感。 全部代码: main.c #include <stdio.h> #include <string.h> #include "sqstack.h"int main(int argc, char *argv[]) {sqstack *s;int i;s stack_create(100);if(…

Python continue 语句

Python continue 语句跳出本次循环&#xff0c;而break跳出整个循环。 continue 语句用来告诉Python跳过当前循环的剩余语句&#xff0c;然后继续进行下一轮循环。 continue语句用在while和for循环中。 Python 语言 continue 语句语法格式如下&#xff1a; continue 流程图…

go语言 go mod生成

1. go hello world 创建文件夹gotest&#xff0c;在其中创建test1.go文件&#xff0c;并写入 package mainimport ("fmt" )func main() {fmt.Println("hello world") } 运行命令 go run test1.go 可以看到输出hello world 2. cli 命令行的使用 代码如下…