【Vue】根据点击单选项显示不同内容

原创已于 2022-07-13 09:51:28 修改 · 2.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-08-27 19:08:43 首次发布

VUE 专栏收录该内容

29 篇文章

订阅专栏

这是一个前端组件模板，用于展示不同项目种类的选择，包括项目一、项目二、项目三和项目四。用户选择项目种类后，会加载相应的案例组件，如comeCase、hisCase、seccase和nonocase。

<template>
	<div class="messageItem" style="height:540px;overflow-y:auto;">
          <div class="oneMsg" style="font-size:18px">
              <span class="case" >项目种类</span>
              <el-radio-group v-model="indexstyle" style="margin-left:10px;">
                  <el-radio :label="1">项目一</el-radio>
                  <el-radio :label="2">项目二</el-radio>
                  <el-radio :label="3">项目三</el-radio>
                  <el-radio :label="4">项目四</el-radio>
              </el-radio-group>
              <div class="change" style="margin-top: 20px">
                  <comecase v-if="indexstyle == 1"></comeCase>
                  <hiscase v-if="indexstyle == 2"></hiscase>
                  <seccase v-if="indexstyle == 3"></seccase>
                  <nonocase v-if="indexstyle == 4"></nonocase>
              </div>                                      
          </div>
      </div>
</template>
<script>
import comecase from './comItem/comCase.vue'
import hiscase from './comItem/hisCase.vue'
import seccase from './comItem/secCase.vue'
import nonocase from './comItem/noneCase.vue'
export default {
    components:{
    comecase,
    hiscase,
    seccase,
    nonocase
    },
    data(){
    ...
    }
}
<script>