el-radio 切换不同视图内容

摸鱼记录保持者

已于 2022-03-09 11:23:28 修改

阅读量1.3k

点赞数 1

分类专栏： RuoYi后台管理与element ui 文章标签： elementui vue.js javascript

于 2022-03-09 11:21:43 首次发布

本文链接：https://blog.csdn.net/m0_58363221/article/details/123372827

版权

RuoYi后台管理与element ui 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

这是一个关于Vue.js的示例，展示了如何通过radio按钮切换不同的创建方式，从而改变页面视图。当用户选择'创建系统'时，显示文件名称和类型的输入框；选择'用户上传'时，则显示'bbb'内容。代码中使用了Element UI的radio组件和v-if指令来实现视图切换。

摘要由CSDN通过智能技术生成

效果如下：

当点击不同radio时，切换不同的创建方式，视图切换

附上代码：

<template>
       <div class="www">

           <p>新增</p>

           <div style="margin-top:50px ">创建方式：
               <el-radio v-model="quxian" label="1">创建系统</el-radio>
               <el-radio v-model="quxian" label="2">用户上传</el-radio>
           </div>

           <div v-if="quxian==1">
               <!--视图内容-->
             <div style="margin-top: 50px"> 
                 文件名称：<el-input placeholder="请输入文件名称" style="width: 300px"/> 
             </div>
             <div style="margin-top: 50px"> 
                 文件类型：<el-input placeholder="请选择文件类型" style="width: 300px"/> 
             </div>
           </div>


           <div v-if="quxian==2">
               <!--视图内容-->
               bbb
           </div>



       </div>
</template>

<script>
    export default {
        data() {
            return {
                //权限，首先显示视图1
                quxian: '1'
            };
        }
    }
</script>

<style>
    /*窗口样式，可以自行改动*/
    .www{
        margin-top: 400px;
        margin: 0 auto;
        border: 1px solid black;
        width: 700px;
        height: 300px;
        text-align: center;
    }
</style>

复制使用，需要自取