Vue+Element 实现根据题型显示不同答案类型

最新推荐文章于 2024-01-03 21:48:57 发布

我是你要找的bug

最新推荐文章于 2024-01-03 21:48:57 发布

阅读量1.1k

点赞数

分类专栏： Vue element change 文章标签： vue

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/107382877

版权

Vue 同时被 3 个专栏收录

19 篇文章

订阅专栏

element

2 篇文章

订阅专栏

change

1 篇文章

订阅专栏

本文介绍了如何使用Vue和Element UI库，根据用户选择的不同题型动态显示相应的答案输入类型，如单选框、多选框等。通过结合Form组件、radio和checkbox元素，结合事件监听和条件渲染实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击选择不同的题型显示不同的答案类型效果图：

在这里插入图片描述

方法一：

用到的知识点：Element的Form表单组件、单选框radio、多选框checkbox、@change事件（绑定值变化时触发的事件）v-if判断显示与隐藏
HTML代码如下：

 <el-form-item label="题型:" prop="type" >
      <div class="tixing">
      <el-radio-group  v-model="ruleForm.type"  @change="agreeChange" class="kind">
      <el-radio label="判断题" style="font-size: 25px;"></el-radio>
      <el-radio label="单选题"></el-radio>
      <el-radio label="多选题"></el-radio>
      </el-radio-group>
      </div>
 </el-form-item>
 <el-form-item v-if="typeSelect=='判断题'" label="答案:"prop="answer" >
   
    <div class="panduan" >
    <el-radio-group v-model="ruleForm.answer">
         <el-radio label="正确"></el-radio>
         <el-radio label="错误"></el-radio>
    </el-radio-group>
    </div>
 </el-form-item>

 <el-form-item v-if="typeSelect=='单选题'" label="答案:" prop="danxuan" >
    <div class="danxuan" >
    <el-radio-group v-model="ruleForm.danxuan" class="dx" >
      <el-radio label="A"></el-radio>
      <el-radio label="B"></el-radio>
      <el-radio label="C"></el-radio>
    </el-radio-group>
    </div>
 </el-form-item>
    
 <el-form-item v-if="typeSelect=='多选题'" label="答案:" prop="duoxuan">
    <div class="duoxuan" >
    <el-radio-group v-model="ruleForm.duoxuan"  class="tx">
      <el-checkbox  label="A"></el-checkbox >
      <el-checkbox  label="B"></el-checkbox >
      <el-checkbox  label="C"></el-checkbox >
    </el-radio-group>
    </div>
 </el-form-item>

Js代码如下：

<script>
export default{
   data(){
      return{
          typeSelect:"",  //记录选中的题类型
          ruleForm:{
             type:'',
             answer:'',
             danxuan:'',
             duoxuan:'',
          },
          
      }
   },
   methods:{
      agreeChange:function(val){
          //console.log(val); // “判断题/选择题/多选题”
          this.typeSelect=val; // 选中的值=判断题/选择题/多选题
      }
   }
}
</script>

方法二：

HTML代码改动部分：

<el-form-item v-if="show" label="答案:" prop="answer">
<div class="panduan" >
      <el-radio-group v-model="ruleForm.answer">
           <el-radio label="正确"></el-radio>
           <el-radio label="错误"></el-radio>
       </el-radio-group>
</div>
</el-form-item>
<el-form-item v-if="radio" label="答案:" prop="danxuan" >
<el-form-item v-if="check" label="答案:" prop="duoxuan">

Js代码：

export default{
   data(){
      return{
           show:true,
           radio:true,
           check:true,
          ruleForm:{
             type:'',
             answer:'',
             danxuan:'',
             duoxuan:'',
          },
          
      }
   },
   methods:{
      agreeChange:function(val){
         if(val=="判断题"){
           this.show=true
           this.radio=false
           this.check=false
         }else if(val=="单选题"){
           this.show=false
           this.radio=true
           this.check=false
         }else{
           this.show=false
           this.radio=false
           this.check=true
         }
       }
    }
 }