Vue3 Radio单选切换展示不同内容

Vue3 Radio单选框切换展示不同内容

环境:vue3+ts+vite+element plus
技巧:v-if,v-show的使用
实现功能:点击单选框展示不同的输入框

效果实现前的代码:

<template><div class="home"><el-row :gutter="20" style="padding: 0 100px"><el-form><el-col :span="24"><el-form-item label="选项:"><el-radio-group v-model="state.radio" class="ml-4"><el-radio label="1" size="large">型号</el-radio><el-radio label="2" size="large">颜色</el-radio></el-radio-group></el-form-item></el-col><el-col :span="24"><el-form-item label="型号:"><el-input v-model="state.input" placeholder="请输入型号"/></el-form-item><el-form-item label="颜色:"><el-input v-model="state.input2" placeholder="请输入颜色"/></el-form-item></el-col></el-form></el-row></div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";const isShow = ref(true)
const state = reactive({radio: '1',input: '',input2: '',
})</script>
<style lang="scss" scoped>
.home {background: antiquewhite;height: 200px;
}
</style>

在这里插入图片描述
1.默认选项型号是选中的,型号输入框也是展示的,那么颜色输入框是需要隐藏,
定义isShow,

<el-col :span="24"><el-form-item label="型号:" v-show="isShow"><el-input v-model="state.input" placeholder="请输入型号"/></el-form-item><el-form-item label="颜色:" v-show="!isShow"><el-input v-model="state.input2" placeholder="请输入颜色"/></el-form-item>
</el-col>//js
const isShow = ref(true)

此时,isShow是true,! isShow就是false了,显示如下
在这里插入图片描述

2.获取单选框选择的radio值。切换的时候下面输入框也要随之切换。
定义@change事件,如果val=1,isShow的值是true,!isShow就是false,如果不是1,那肯定是2了,因为这里只有2个选项,val=2时,型号的 isShow是fasle,颜色的! isShow就是true

<el-radio-group v-model="state.radio" class="ml-4" @change="handleChange"><el-radio label="1" size="large" >型号</el-radio><el-radio label="2" size="large" >颜色</el-radio>
</el-radio-group>//js
const handleChange = (val: any) => {if (val == 1) {isShow.value = true} else {isShow.value = false}
}

在这里插入图片描述
完整代码如下

<template><div class="home"><el-row :gutter="20" style="padding: 0 100px"><el-form><el-col :span="24"><el-form-item label="选项:"><el-radio-group v-model="state.radio" class="ml-4" @change="handleChange"><el-radio label="1" size="large" >型号</el-radio><el-radio label="2" size="large" >颜色</el-radio></el-radio-group></el-form-item></el-col><el-col :span="24"><el-form-item label="型号:" v-show="isShow"><el-input v-model="state.input" placeholder="请输入型号"/></el-form-item><el-form-item label="颜色:" v-show="!isShow"><el-input v-model="state.input2" placeholder="请输入颜色"/></el-form-item></el-col></el-form></el-row></div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
const isShow = ref(true)
const state = reactive({radio: '1',input: '',input2: '',
})
const handleChange = (val: any) => {if (val == 1) {isShow.value = true} else {isShow.value = false}
}
</script>
<style lang="scss" scoped>
.home {background: antiquewhite;height: 200px;
}
</style>

至此,有没有发现 v-if 还没出现

改造

效果:进入页面是单选框默认没有选择,输入框是隐藏的,点击单选框才展示输入框
思路:单选radio的值为0时,也就是刚进入页面radio单选框并没有选择,当radio有值时,对应的输入框显示。

此时 v-if 出场了,只要radio的值不为0,也就是radio必须有选择才出现输入框这块,但是radio的默认值是要改为0

<el-col :span="24" v-if="state.radio!=0"><el-form-item label="型号:" v-show="isShow"><el-input v-model="state.input" placeholder="请输入型号"/></el-form-item><el-form-item label="颜色:" v-show="!isShow"><el-input v-model="state.input2" placeholder="请输入颜色"/></el-form-item>
</el-col>
//js
const state = reactive({radio: '0',input: '',input2: '',
})

进入页面时效果:
在这里插入图片描述
选择时:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/14479.shtml

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

相关文章

优化 SQL 体验:五款 AI 驱动工具助力 SQL 查询

SQL AI 工具能够极大提高跟数据和数据库打交道人员&#xff08;e.g. 数据分析师、数据科学家、数据库管理员、开发者&#xff09;的效率和生产力&#xff0c;比如可以根据自然语言输入自动生成 SQL 查询&#xff08;非技术用户也能轻松访问和分析数据了&#xff01;&#xff09…

数学建模算法应用合辑-AHP层次分析法【电工杯】高校教学资源合理分配

目录 摘 要 一、 问题重述 1.1 问题的背景 1.2 问题的描述 二、 问题的分析 2.1 概述

【分布式能源的选址与定容】基于多目标粒子群算法分布式电源选址定容规划研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 1.1 功率损耗 ​编辑1.2 电压质量 1.3 DG总容量 &#x1f4da;2 运行结果 &#x1f308;3 Matlab代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 参考文献&#xff1a; 本文采用的是换一个算法解决&#xff0c; 基于基于多目标粒子群算法分布…

AB 压力测试

服务器配置 阿里云Ubuntu 64位 CPU1 核 内存2 GB 公网带宽1 Mbps ab -c100 -n1000 http://127.0.0.1:9501/ -n&#xff1a;在测试会话中所执行的请求个数。默认时&#xff0c;仅执行一个请求。 -c&#xff1a;一次产生的请求个数。默认是一次一个。 ab -c 100 -n 200 ht…

Doris注意事项,Doris部署在阿里云,写不进去数据

1.Doris官网 Doris官网https://doris.apache.org/ 2.根本原因 本地idea访问FE&#xff0c;FE会返回BE的地址&#xff0c;但是在服务器上通过ip addr查看&#xff0c;发现只有局域网IP&#xff0c;所以FE返回了局域网的IP&#xff0c;导致idea连接不上BE 3.解决办法 重写Ba…

二十三章:抗对抗性操纵的弱监督和半监督语义分割的属性解释

0.摘要 弱监督语义分割从分类器中生成像素级定位&#xff0c;但往往会限制其关注目标对象的一个小的区域。AdvCAM是一种图像的属性图&#xff0c;通过增加分类分数来进行操作。这种操作以反对抗的方式实现&#xff0c;沿着像素梯度的相反方向扰动图像。它迫使最初被认为不具有区…

10. Mybatis 项目的创建

目录 1. Mybatis 概念 2. 第一个 Mybits 查询 2.1 创建数据库和表 2.2 添加 Mybatis 框架支持 2.3 添加配置文件 2.4 配置 MyBatis 中的 XML 路径 2.5 添加业务代码 在学习 Mybatis 之前&#xff0c;我们需要知道 Mybatis 和 Spring 没有任何的关系。如果一定要强调二者…

建造者设计模式 + 高阶函数 => DSL

该设计模式适用于创建复杂对象&#xff0c;该复杂对象通常是由各个部分的子对象用一定的算法或者步骤构成&#xff0c;针对每个子对象内部算法和步骤通常是稳定的&#xff0c;但是该复杂对象的确实由于不同的需求而选择使用不同的子对象进行组装。对于构建该复杂的对象&#xf…

20.0 HTTP 通信

1. web开发 1.1 web开发介绍 Web指的是World Wide Web(万维网), 是一种基于互联网的信息系统. 万维网由一系列通过超文本链接相互连接的页面组成, 这些页面中包含了文本, 图像, 音频, 视频等多媒体内容. 用户可以通过浏览器访问万维网上的网页, 并通过超链接在不同页面之间导…

Golang速成

目录 Golang 语言特性Golang的优势Golang 的应用场景Golang 的不足 基础语法变量的声明常量与 iotastring字符串遍历strings 包bytes 包strconv 包unicode 包 循环语句range 函数多返回值init 函数闭包import 导包匿名函数 指针defer切片 slice数组sliceslice 操作… mapmap 的…

js获取上传视频的封面第一帧

代码如下&#xff1a;粘贴到这个在线编辑器里&#xff0c;可以测试效果。 菜鸟教程在线编辑器 <div><div style"flex: 1;border: 1px solid #999; position:relative;color: #333;background-color:#FFF2B8;"><span style"position: absolute…

数据结构基础知识、名词概述

1.1 基本概念和术语1.1.1 数据、 数据元素、 数据项和数据对象1.1.2 数据结构1.1.3 数据类型和抽象数据类型 1.2 抽象数据类型的表示与实现1.3 算法与算法分析&#xff08;1&#xff09;1.4 算法与算法分析&#xff08;2&#xff09;1.5 算法与算法分析&#xff08;3&#xff0…

pytest 自定义HOOK函数

除了系统提过的HOOK函数外&#xff0c;也可以通过自定义HOOK的方式实现想要的功能。 首先创建一个py文件&#xff0c;里面定义自己的HOOK函数&#xff0c;主要pytest里面的hook函数必须以pytest开头。 #myhook.pydef pytest_myhook(user):"""自定义HOOK函数&q…

LeetCode[面试题04.08]首个共同祖先

难度&#xff1a;Medium 题目&#xff1a; 设计并实现一个算法&#xff0c;找出二叉树中某两个节点的第一个共同祖先。不得将其他的节点存储在另外的数据结构中。注意&#xff1a;这不一定是二叉搜索树。 例如&#xff0c;给定如下二叉树: root [3,5,1,6,2,0,8,null,null,7,…

51单片机--AD/DA

AD/DA介绍 AD和DA是模拟信号和数字信号之间的转换过程。 AD&#xff0c;全称为模拟到数字&#xff08;Analog-to-Digital&#xff09;&#xff0c;指的是将模拟信号转换为数字信号的过程。在AD转换中&#xff0c;模拟信号经过采样、量化和编码等步骤&#xff0c;被转换为离散的…

C++ 中的关键字

&#x1f31f; C总计63个关键字&#xff0c;C语言32个关键字。 asmdoifreturntypedefautodoubleinlineshorttypeidbooldynamic_castintsignedtypenamebreakelselongsizeofunioncaseenummutablestaticunsignedcatchexplicitnamespacestatic_castusingcharexportnewstructvirtual…

缓存和数据库一致性问题分析

目录 1、数据不一致的原因 1.1 并发操作 1.2 非原子操作 1.3 数据库主从同步延迟 2、数据不一致的解决方案 2.1 并发操作 2.2 非原子操作 2.3 主从同步延迟 2.4 最终方案 3、不同场景下的特殊考虑 3.1 读多写少的场景 3.2 读少写多的场景 1、数据不一致的原因 导致…

深入理解C语言中的字符指针初始化与用法

字符指针初始化 - C 语言详解 目录 1. 介绍 2. 字符指针初始化的基础 3. 使用 const 关键字的字符指针初始化 4. C 语言与 C 在字符指针初始化的差异 5. 常见陷阱与最佳实践 6. 进阶概念&#xff1a;指针算术与动态内存分配 7. 字符串函数与字符指针 8. 结论介绍 在 C 语言中…

基于多设计模式下的同步异步⽇志系统

目录 1.项目介绍 2.整体框架设计 3.⽇志输出格式化类设计 4.⽇志落地(LogSink)类设计 5.⽇志器类(Logger)设计&#xff08;建造者模式&#xff09; 6.双缓冲区异步任务处理器&#xff08;AsyncLooper&#xff09;设计 7.⽇志宏&全局接⼝设计&#xff08;代理模式&am…

Python获取音视频时长

Python获取音视频时长 Python获取音视频时长1、安装插件2、获取音视频时长.py3、打包exe4、下载地址 Python获取音视频时长 1、安装插件 pip install moviepy -i https://pypi.tuna.tsinghua.edu.cn/simple2、获取音视频时长.py 上代码&#xff1a;获取音视频时长.py # -*-…