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

news2024/10/5 21:23:07

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.coloradmin.cn/o/1793966.html

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

相关文章

ElementUI之el-tooltip显示多行内容

ElementUI之el-tooltip显示多行内容 文章目录 ElementUI之el-tooltip显示多行内容1. 多行文本实现2. 实现代码3. 展示效果 1. 多行文本实现 展示多行文本或者是设置文本内容的格式&#xff0c;使用具名 slot 分发content&#xff0c;替代tooltip中的content属性。 2. 实现代码 …

​谁用谁知道,教师实用工具分享​

老师们面临着日益增长的教学和管理任务。为了有效提升工作效率&#xff0c;一些实用的工具成为了老师们不可或缺的助手。给大家分享几款教师必备的工具&#xff0c;帮助教师们在教学和管理工作中更加得心应手。 1. 知乎&#xff1a;知识的海洋 知乎是一个中文问答社区&#xf…

在Jenkins 中使用 NVM 管理 Node.js 部署项目的自动化脚本

在Jenkins 中使用 NVM 管理 Node.js 部署项目的自动化脚本 人生旅途&#xff0c;总有人不断地走来&#xff0c;有人不断地离去。当新名字变成老名字&#xff0c;当老的名字渐渐模糊&#xff0c;又是一个故事的结束和另一个故事的开始。 在现代软件开发中&#xff0c;持续集成/持…

线上虚拟展厅的6大优势

随着科技的日新月异&#xff0c;线上VR虚拟展厅已崭露头角&#xff0c;成为企业创新的营销利器。它凭借沉浸式的交互体验、全球市场的无缝拓展以及显著降低的营销成本&#xff0c;为企业的营销活动带来了颠覆性的变革。那么&#xff0c;视创云展的线上VR虚拟展厅究竟具备哪些引…

NSSCTF-Web题目5

目录 [SWPUCTF 2021 新生赛]error 1、题目 2、知识点 3、思路 [LitCTF 2023]作业管理系统 1、题目 2、知识点 3、思路 [HUBUCTF 2022 新生赛]checkin 1、题目 2、知识点 3、思路 [SWPUCTF 2021 新生赛]error 1、题目 2、知识点 数据库注入、报错注入 3、思路 首先…

UE4 使用样条线做鱼儿封闭路径动画

描述&#xff1a;鱼儿的游动动画的特点 1.通常是始终保持Y (Pitch)轴角度不变 2.调头的时候改变的是Z轴角度 效果&#xff1a;调头的时候比较自然 蓝图&#xff1a; 为了让鱼儿有恒定的游动速度&#xff0c;增加以下蓝图节点&#xff0c;游动速度为50 最后&#xff0c;让鱼…

763. 划分字母区间(中等)

763. 划分字母区间 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转&#xff1a;763. 划分字母区间 2.详细题解 划分字母片段&#xff0c;要求每个字母仅能出现在一个片段中&#xff0c;划分的片段数要最多。如果没有限制要最多的情况&#xff0c…

树-层序遍历序列构造二叉树

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

派派派森03

1.JSON数据 Python数据和Json数据的相互转化 # 导入json模块 import json#准备符合json格式要求的python数据 data [{"name": "老王", "age": 16}, {"name": "张三", "age": 20}]# 通过json.dump(data)方法把pyt…

ES6-03-模版字符串、对象的简化写法

一、模版字符串 1-1、声明 反引号。 1-2、特性 1、字符串内容可以直接换行 得用号连接 2、变量拼接 现在&#xff1a; 二、对象的简化写法 ES6允许在大括号里面&#xff0c;直接写入变量和函数&#xff0c;作为对象的属性和方法。 let name milk;let chage function(){con…

文心一言 VS 讯飞星火 VS chatgpt (275)-- 算法导论20.3 2题

二、修改 vEB 树以支持带有卫星数据的关键字。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; vEB 树&#xff08;van Emde Boas 树&#xff09;是一种用于处理稀疏位集合的高效数据结构&#xff0c;它允许在常数时间内执行查找、插入、删除和前驱/后继操作。然…

SCT53600TVB具有反向电流保护的理想二极管控制器

4.7V至65V工作范围 – 65V反向额定电压 用于外部N沟道MOSFET的电荷泵 20mV正向压降调节 12V栅极驱动电压 带启用输入 驱动高侧外部N沟道MOSFET 1μA关断电流&#xff08;EN低&#xff09; 60μA工作静态电流&#xff08;EN高&#xff09; 2.3-A峰值…

zabbix“专家坐诊”第241期问答

问题一 Q&#xff1a;华为交换机的100GE 1/0/1口的光模块收光值监测不到&#xff0c;有没有人碰到过这个问题呢&#xff1f;其他的端口都能监测到收光值&#xff0c;但是100GE 1/0/1口监测不到收光值。底层能查到&#xff0c;zabbix 6.0监控不到&#xff0c;以下是端口的报错信…

EasyRecovery2024永久免费crack激活码注册码

在数字化时代&#xff0c;数据已经成为我们生活和工作中不可或缺的一部分。无论是个人用户还是企业用户&#xff0c;都面临着数据丢失的风险。一旦数据丢失&#xff0c;可能会给我们的工作带来极大的不便&#xff0c;甚至可能对企业造成重大损失。因此&#xff0c;数据安全和恢…

Unity VR 零基础开发之 Pico4 MR

一、新建Unity2021.3.37 3D工程 二、切换到Android安卓平台 1、点击Unity编辑器左上角的Flie后&#xff0c;选择Build Setting选项。 2、弹出弹窗后&#xff0c;点击Android选项&#xff0c;然后再点击Switch Platform按钮切换成安卓平台。 3、切换完成后Android选项后面会显示…

php7.3安装phalcon扩展

php7安装3.4版本的phalcon扩展 适用于Centos6.x和Centos7.x系统&#xff0c;php使用7.1版本&#xff0c;wlnmp一键包已支持该扩展 phalcon扩展包地址&#xff1a;https://github.com/phalcon/cphalcon &#xff08;git clone 有可能连接不上&#xff09; 1、安装所需依赖&a…

Hadoop3:MapReduce源码解读之Map阶段的TextInputFormat切片机制(3)

Job那块的断点代码截图省略&#xff0c;直接进入切片逻辑 参考&#xff1a;Hadoop3&#xff1a;MapReduce源码解读之Map阶段的Job任务提交流程&#xff08;1&#xff09; 5、TextInputFormat源码解析 类的继承关系 它的内容比较少 重写了两个父类的方法 这里关心一下泛型参数…

MySQL Shell 使用指南

前言&#xff1a; MySQL Shell 是官方提供的 MySQL 周边适配组件&#xff0c;是新一代的高级客户端&#xff0c;在 MySQL 8.0 及其以后的版本得以慢慢推广应用。之前笔者因为 MySQL 8.0 用得比较少&#xff0c;一直没有详细使用过这个工具&#xff0c;近期在捣鼓 MySQL 8.0&am…

Android Compose 十:常用组件列表 监听

1 去掉超出滑动区域时的拖拽的阴影 即 overScrollMode 代码如下 CompositionLocalProvider(LocalOverscrollConfiguration provides null) {LazyColumn() {items(list, key {list.indexOf(it)}){Row(Modifier.animateItemPlacement(tween(durationMillis 250))) {Text(text…

WPF真入门教程32--WPF数字大屏项目实干

1、项目背景 WPF (Windows Presentation Foundation) 是微软的一个框架&#xff0c;用于构建桌面客户端应用程序&#xff0c;它支持富互联网应用程序&#xff08;RIA&#xff09;的开发。在数字大屏应用中&#xff0c;WPF可以用来构建复杂的用户界面&#xff0c;展示庞大的数据…