vue 列表回显 radio

最新推荐文章于 2025-02-25 08:00:00 发布

原创最新推荐文章于 2025-02-25 08:00:00 发布 · 751 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

小程序

当前文章被收录于：

小程序

9 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Vue.js项目中实现根据特定条件动态切换Radio选项的状态。通过使用v-model结合v-if指令，可以实现在不同条件下仅显示当前选中的Radio按钮而隐藏其他未选中的选项。

需求

在这里插入图片描述

     <ul
                      v-for="(t, idex) in i.options"
                      :key="idex"
                      class="alicenter"
                    >
                      <li class="mt" style="margin-top: 40px">
                        <el-radio-group v-model="i.userAnswer">
                          <el-radio
                            v-if="t.order == i.userAnswer"
                            :label="i.userAnswer"
                          >
                            {{ t.text }}
                          </el-radio>
                          <el-radio disabled label="禁用" v-else>
                            {{ t.text }}
                          </el-radio>
                        </el-radio-group>
                      </li>
               
                    </ul>

v-model是几 radio几就会被选中
如果不加上 v-if=“t.order == i.userAnswer”
那都会被选中
所以我这里根据order来去判断的
以解决

标签

#vue.js