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

这篇具有很好参考价值的文章主要介绍了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>

Vue3 Radio单选切换展示不同内容,Vue3,vue3,v-show,v-if
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了,显示如下
Vue3 Radio单选切换展示不同内容,Vue3,vue3,v-show,v-if

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
    }
}

Vue3 Radio单选切换展示不同内容,Vue3,vue3,v-show,v-if
完整代码如下

<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: '',
})

进入页面时效果:
Vue3 Radio单选切换展示不同内容,Vue3,vue3,v-show,v-if
选择时:
Vue3 Radio单选切换展示不同内容,Vue3,vue3,v-show,v-if文章来源地址https://www.toymoban.com/news/detail-611836.html

到了这里,关于Vue3 Radio单选切换展示不同内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3在点击菜单切换路由时,将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

    功能:Vue3在点击菜单切换路由时,将页面el-main的内容滚动到顶部,布局如下,使用UI组件库为ElementPlus  在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动,但是我使用无效,于是使用操作dom的方法,如下 可以使用 watch 函数来  监听

    2024年01月18日
    浏览(55)
  • vue3+ts实现element Plus Tree组件单选和取消单选的功能(取消已经选中的树节点),及vue3的proxy对象转换

     具体效果和代码如下: 点击了\\\"节点1\\\"并高亮显示 打印结果如下  vue3的打印对象是proxy,如需变成单纯的数组对象可以使用 JSON.parse(JSON.stringify(list))进行转换。  再次点击\\\"节点1\\\"则取消当前选中   如果对您有帮助点个赞,关注收藏一下吧 。

    2024年02月12日
    浏览(54)
  • Vue3:一页多题答案提示及循环radio和checkbox混合使用

    一页多题,类型包括单选(单选、判断)和多选,radio和checkbox混合使用,答案检验数据匹配,正确答案格式化,答案提交数据格式化,数据提交。 数据里的答案为:A_B_C_D 需要校正展示的答案为:ABCD 提交数据的答案为:题目id-A_B_C_D 通过 :value=\\\"list.id+\\\'_\\\'+radio.name\\\"  和   :va

    2024年02月05日
    浏览(45)
  • vue3使用Element ui plus中MessageBox消息框+radio框配合使用

    想要达到的效果 首先安装element ui plus 省略~~ 官网地址: https://element-plus.gitee.io/zh-CN/component/message-box.html https://element-plus.gitee.io/zh-CN/component/message-box.html 需要用到的 引入

    2024年01月16日
    浏览(42)
  • 【Vue3】Vue3核心内容(上)

    🎀个人主页:努力学习前端知识的小羊 感谢你们的支持:收藏🎄 点赞🍬 加关注🪐 1.组件中所用的:数据,方法等等,均要配置在setup中 2.setup函数的俩种返回值: (1)若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用 (2)若返回一个渲染函数:则可以

    2024年02月16日
    浏览(56)
  • Vue3通透教程【三】Vue3代码初体验找不同

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月13日
    浏览(34)
  • vue3 实现简单计数器示例——一个html文件展示vue3的效果

    目的 :作为一个新手开发,我想使用 Vue 3 将代码封装在 HTML 文件中时,进行界面打开展示。 学了一个简单计数器界面展示,代码如下: 在 上述HTML 文件里,包含了文件头标题 title , 接着定义了一个内容 div id=\\\"app\\\" 而后定义了一个内容,包含标题和数字,以及两个按钮的 templa

    2024年01月18日
    浏览(44)
  • 【vue+Swiper】vue中使用swiper缩略图,展示一张大图及n张小图,点击小图切换不同的大图展示,完整代码

    效果: 这是在swiper官网上找的示例,swiper太强大了,有非常多不同的示例,有api,有教程,还可以下载示例代码。 但是第一次使用,研究这个缩略图的实现还是花了几个小时,好在实现了。 swiper官网请戳这里 安装 将swiper封装成组件可以复用,在components公共组件文件夹中新增

    2024年02月05日
    浏览(46)
  • vue3项目利用iframe展示其他页面

    iframe是html内联框架元素,它能够将另一个 HTML 页面嵌入到当前页面中。 主要属性如下: src 被嵌套的页面的 URL 地址 name 框架名称 scrolling 否要在框架内显示滚动条。值; auto(仅当框架的内容超出框架的范围时显示滚动条)、yes、no width iframe的宽度 height iframe的高度 frameborde

    2024年02月12日
    浏览(47)
  • vue2和vue3项目之间的不同

    总结一下vue3跟vue2在使用时语法的不同 npm install vue-cli -g (vue-lcli2) npm install -g @vue/cli (vue-cli3) 我本地没有vue-cli2.x,所以复制了一下别人的用来记录。 以管理员身份打开命令行界面 (按住 shift 鼠标右键 打开 PowerShell),输入命令: 全局安装 webpack:npm install webpack -g (vue2需要安

    2024年02月13日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包