VueJS2 如何根据单选框选择切换组件的渲染顺序

核心思路是把所有排列规则抽象为独立的配置映射，和渲染逻辑完全解耦，后续新增规则不需要修改原有渲染代码，可适配任意数量的排列需求。

1. 定义规则映射配置 #

提前把每个单选框对应的排列逻辑封装为独立的生成方法，统一存在规则对象里：

// key对应单选框的绑定值，value为生成标签序列的方法，可传入自定义标签总数
const tagSortRules = {
  // 单选框1：蓝红交替排列
  1: (total = 6) => Array.from({length: total}, (_, i) => i % 2 === 0 ? 'blue' : 'red'),
  // 单选框2：可自定义其他规则，示例为红、蓝、蓝、红排列
  2: (total = 4) => ['red', 'blue', 'blue', 'red'],
  // 单选框3：三蓝一红循环排列
  3: (total = 4) => Array.from({length: total}, (_, i) => i % 4 === 3 ? 'red' : 'blue')
}

2. 绑定状态与渲染逻辑 #

用响应式变量存储当前选中的单选框值，值变化时自动调用对应规则生成标签序列，遍历序列渲染对应颜色的标签即可，以下是Vue3的示例代码：

<template>
  <!-- 单选框组 -->
  <div class="radio-group">
    <label v-for="ruleVal in [1,2,3]" :key="ruleVal" style="margin-right: 12px;">
      <input type="radio" v-model="selectedRule" :value="ruleVal" />
      规则{{ruleVal}}
    </label>
  </div>

  <!-- 标签渲染区域 -->
  <div class="tag-container" style="margin-top: 16px;">
    <span 
      v-for="(tagType, index) in renderTagList" 
      :key="index"
      :class="['tag', tagType]"
      style="margin-right: 8px; padding: 4px 8px; border-radius: 4px; color: #fff;"
    >
      {{ tagType === 'blue' ? 'Script 1' : 'Script 2' }}
    </span>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 存储当前选中的单选框值，默认选中规则1
const selectedRule = ref(1)
// 计算当前需要渲染的标签序列
const renderTagList = computed(() => {
  const generateFunc = tagSortRules[selectedRule.value] || tagSortRules[1]
  // 可传入自定义的标签总数，比如generateFunc(10)生成10个标签
  return generateFunc()
})
</script>

<style scoped>
.blue {
  background-color: #1677ff;
}
.red {
  background-color: #ff4d4f;
}
</style>

如果用React或者原生JS，只需要修改对应框架的状态绑定和渲染语法，核心的规则配置逻辑完全通用。

3. 扩展规则的方法 #

• 新增排列规则：直接在tagSortRules对象中添加对应单选框值的生成方法即可，不需要修改渲染层代码
• 自定义标签总数：给生成方法传入自定义数值即可调整生成的标签数量
• 绑定业务数据：如果标签需要携带独立的业务信息，可把序列中的blue/red替换为对应业务数据的唯一标识，渲染时匹配对应组件和数据即可

方案优势 #

• 逻辑解耦：规则配置和渲染逻辑完全分离，修改规则不会影响其他逻辑
• 扩展性强：新增规则仅需新增一行配置，侵入性极低
• 适配性好：可适配任意前端框架，核心逻辑可复用

效果示例 #

内容的提问来源于stack exchange，提问作者Josh