vue3+elementPlus实现Radio单选切换显示不同内容

el-radio-group 组件方法:

<template>
  <el-radio-group v-model="radio">
    <el-radio :value="0">阶梯达标</el-radio>
    <el-radio :value="1">限时达标</el-radio>
  </el-radio-group>
</template>

给radio添加监听事件 @change:

<template>
  <el-radio-group v-model="radio" @change="handleChange">
    <el-radio :value="0">阶梯达标</el-radio>
    <el-radio :value="1">限时达标</el-radio>
  </el-radio-group>
</template>

这里也可以使用字典:

               <el-radio-group v-model="form.stageType" @change="handleChange">
                  <el-radio
                     v-for="dict in stage_type"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>

点击某一项的时候,根据点击事件修改current的值。

<script setup name="Rewards">

 const current = ref(0);

 const handleChange = (val) => {
   current.value = val;
 }
</script>

使用v-if 判断radio回显内容:

       <div class="con">
          <div class="con-item" v-if="current == 0">
            <div class="input-items">
              <label for="name">达标交易量:</label>
              <input
                type="text"
                placeholder="输入交易量"
              />
            </div>
          </div>

          <div class="con-item" v-if="current == 1">
            <div class="input-items">
              <label for="name">开通后(天):</label>
              <input
                type="text"
                placeholder="输入天数"
              />
            </div>
 

          </div>
        </div>

实现效果:

在这里插入图片描述

在这里插入图片描述

完整代码:

    <!-- 添加或修改阶段奖励对话框 -->
    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
      <el-form ref="rewardsRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入模板名称" />
        </el-form-item>

        <el-col :span="24">
          <el-form-item label="阶段奖励类型" prop="stageType">
               <el-radio-group v-model="form.stageType" @change="handleChange">
                  <el-radio
                     v-for="dict in stage_type"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
        </el-form-item>
        </el-col>



        <div class="con">
          <div class="con-item" v-if="current == 0">
            <div class="input-items">
              <label for="name">达标交易量:</label>
              <input
                type="text"
                placeholder="输入交易量"
              />
            </div>
          </div>

          <div class="con-item" v-if="current == 1">
            <div class="input-items">
              <label for="name">开通后(天):</label>
              <input
                type="text"
                placeholder="输入天数"
              />
            </div>
 

          </div>
        </div>





        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

<script setup name="Rewards">

 const current = ref(0);
 const handleChange = (val) => {
   current.value = val;
 }


</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式深度剖析】【3】【行为型】【职责链模式】| 以购物中心客户服务流程为例加深理解

&#x1f448;️上一篇:命令模式 设计模式-专栏&#x1f448;️ 文章目录 职责链模式定义英文原话直译如何理解呢&#xff1f; 职责链模式的角色1. Handler&#xff08;抽象处理者&#xff09;2. ConcreteHandler&#xff08;具体处理者&#xff09;3. Client&#xff08;客户…

Vue随笔记

1 Idea里面使用Vue Idea里面要安装Vue插件 File - New - Project - JavaScript - Vue.js 然后出现&#xff1a; "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js" --ignore-existing --package vue/cli…

学习串口屏需要了解哪些方面的知识

学习串口屏需要掌握的知识主要包括以下几个方面&#xff1a; 串口通信原理&#xff1a;串口屏是基于串口通信的显示控制模组&#xff0c;因此了解串口通信的基本原理和通信协议是必要的。你需要了解串口通信的基本概念、数据格式、波特率、校验位等参数&#xff0c;以及串口通…

信息学奥赛初赛天天练-21-完善程序-动态规划、编辑距离与字符数组应用的极致探索

PDF文档公众号回复关键字:20240606 1 2023 CSP-J 完善程序2 完善程序&#xff08;单选题&#xff0c;每小题 3 分&#xff0c;共计 30 分&#xff09; 给定两个字符串&#xff0c;每次操作可以选择删除&#xff08;Delete&#xff09;、插入&#xff08;Insert&#xff09;…

一文读懂动态IP与静态IP的区别与选择

在当今的数字世界中&#xff0c;网络安全与隐私保护已成为越来越重要的话题&#xff0c;网络代理作为一种常见的技术工具&#xff0c;被广泛应用于保护用户隐私、绕过网络限制、进行网络测试等诸多领域。 IPFoxy提供独享纯净的动态IP代理与静态IP代理选择&#xff0c;我们需要根…

AI大模型语料库

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 语料库概述 语料库&#xff08;Corpus&#xff09;是一个存储了大量真实语言使用实例的集合&#xff0c;这些实例可以是文本、语音、视频等多种形式的语言数据。语料库通常…

如何将 MySQL 数据库共享给他人?

文章目录 共享所有数据库给他人1. 连接到 MySQL 数据库2. 选择要使用的数据库3. 修改连接所需的 host4. 刷新权限 共享部分数据库给他人1. 创建用户2. 授权3. 刷新权限 结语 &#x1f389;欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是I…

HCIP-Datacom-ARST自选题库_10_其他判断【23道题】

1.端到端时延等于路径上所有处理时延与队列时延之和。 2.部署PPP Multilink之后&#xff0c;数据将根据源地址和目的地址均匀的分配在各条成员链路上。 3.流镜像分为本地流镜像和远程流镜像两种方式。√ 4.IP报文中用Tos字段进行Q0S标记&#xff0c;Tos字段中是使用前6bit来…

BGP基础实验

BGP协议中的建邻&#xff0c;与宣告路由分开的 在任何一台BGP路由上&#xff0c;均可宣告本地路由表中通过任何形势获取的路由条目&#xff0c;将其共享给其他BGP邻居&#xff1b; 然后display ip rou查看 *>代表状态 *的意思是可用 >代表优 i和*>无关&#x…

数据结构———链表

链表是经常用到的一种基础数据结构&#xff0c;接下来我们讲讲链表。 链表&#xff1a; 特点&#xff1a; 链表可分为有头/无头链表&#xff0c;循环/无环&#xff0c;双向/单向链表&#xff0c;每个链表节点都包含一个数据和下一个链表节点的地址。 每个链表节点都指向下一…

树-层序遍历序列构造二叉树(mid)

一、问题描述 二、实现思路 问题给出了层序遍历序列&#xff0c;我们使用队列来实现二叉树的构造过程&#xff1a; 这里注意&#xff1a;在写代码时&#xff0c;比较字符串数组内元素str和某个字符串是否相等时用str.equals("#")的操作&#xff0c;如果用 会引发比较…

上市即交付,比亚迪秦L DM-i万人交车暨千媒众测开营

6月6日&#xff0c;“引领中级 开创油耗2时代”秦L DM-i万人交车暨千媒众测开营仪式在比亚迪大本营深圳盛大举行。 众多车主代表亲临现场&#xff0c;与全国各地的比亚迪4S店千店联动&#xff0c;将秦L DM-i全国交付推向新的高潮。发布即量产&#xff0c;上市即交付&#xff0…

leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、二叉树的遍历、 对称二叉树等的介绍

文章目录 前言一、单值二叉树二、相同的树三、二叉树的前序遍历四、二叉树的中序遍历五、二叉树的后序遍历六、另一棵树的子树七、二叉树的遍历八、 对称二叉树总结 前言 leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、…

STM32项目分享:智能家居语音系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB打板焊接图: 五、程序设计 六、实验效果 七、包含内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.com…

删除的照片为什么总是反复出现?6种有效解决方案

在您使用手机时可能会遇到这样的问题&#xff1a;为什么删除了照片后它又回来了&#xff1f;这种奇怪的情况可能会让用户感到不安&#xff0c;并且质疑设备的可靠性。本文将解释导致这种现象的原因&#xff0c;并探讨确保永久删除图像的有效方法。让我们来解决“为什么我的照片…

【软件项目管理篇】怎样平衡软件质量与时间成本范围的关系?

你会发现&#xff0c;在实际的软件项目中不乏这样的例子&#xff1a; 一个项目&#xff0c;正常估算&#xff0c;要三个月才能完成&#xff0c;但是老板或客户要压缩到一个月完成&#xff0c;而你不知道如何说服他们&#xff1b;项目开发一半&#xff0c;产品经理告诉你&#…

智能电销机器人的作用和原理是什么?

要问世界上更火爆的创新技术&#xff0c;人工智能必然要算其一&#xff0c;人工智能正不断的改变着我们的生活&#xff0c;比如智能手机、智能家居、智能门锁等产品已经不断的渗透在了我们的生活之中&#xff0c;而近几年兴起的人工智能语音识别机器人&#xff0c;也迅速俘获了…

【蓝桥杯2025备赛】分巧克力

【蓝桥杯2025备赛】分巧克力 [蓝桥杯 2017 省 AB] 分巧克力 题目描述 儿童节那天有 K K K 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。 小明一共有 N N N 块巧克力&#xff0c;其中第 i i i 块是 H i W i H_i \times W_i Hi​Wi​ 的方格组成的长方形…

GPT、Claude、Perplexity等AI集体宕机罢工,全球打工人崩溃了

就在昨天&#xff01;一个看似平常的周三上午&#xff0c;三大顶尖AI居然集体罢工了&#xff01; 首先&#xff0c;网友们发现OpenAI的ChatGPT崩了&#xff0c;接着Claude和Perplexity也接连陷入崩溃状态。而Gemini也出现了短暂下线问题&#xff0c;整整三个小时&#xff0c;这…

手写节流throttle

节流throttle 应用场景 滚动事件监听scroll&#xff1a;例如监听页面滚动到底部加载更多数据时&#xff0c;使用节流技术减少检查滚动位置的频率&#xff0c;提高性能。鼠标移动事件mousemove&#xff1a;例如实现一个拖拽功能&#xff0c;使用节流技术减少鼠标移动事件的处理…