Vue.js中如何在单个循环内设置多个条件？附HTML代码示例

嘿，我来帮你搞定这个问题！根据你给出的付费版和免费版HTML代码，看起来你需要在循环渲染计划头部的时候，根据不同的条件（比如是否免费、是否推荐）展示对应的模板和样式。下面给你两种实用的方法：

方法1：在v-for中直接结合多条件v-if #

这种方法适合简单的场景，直接在循环的元素内部用v-if判断多个条件，渲染对应的内容块。

假设你的数据源是一个包含多个计划对象的数组plans，每个对象有type（区分免费/付费）、isRecommended（是否推荐）等字段，代码可以这么写：

<template>
  <table>
    <thead>
      <tr>
        <!-- 循环遍历所有计划 -->
        <th 
          v-for="plan in plans" 
          :key="plan.id"
          <!-- 动态绑定类名，根据计划类型切换样式 -->
          :class="{
            'plan-header': true,
            'free': plan.type === 'free',
            'blue': plan.type !== 'free'
          }"
        >
          <!-- 条件1：非免费且非推荐的计划 -->
          <div v-if="plan.type !== 'free' && !plan.isRecommended">
            <div class="pricing-plan-name">Not Free and not Recommended</div>
            <div class="pricing-plan-price">
              <sup>$</sup>0<span>.00</span>
            </div>
            <div class="pricing-plan-period">month</div>
          </div>

          <!-- 条件2：免费计划 -->
          <div v-else-if="plan.type === 'free'">
            <div class="pricing-plan-name">Free</div>
            <div class="pricing-plan-price">
              <sup>$</sup>0<span>.00</span>
            </div>
            <div class="pricing-plan-period">month</div>
          </div>

          <!-- 扩展条件：付费且推荐的计划 -->
          <div v-else>
            <div class="pricing-plan-name">Recommended Premium Plan</div>
            <div class="pricing-plan-price">
              <sup>$</sup>9<span>.99</span>
            </div>
            <div class="pricing-plan-period">month</div>
          </div>
        </th>
      </tr>
    </thead>
  </table>
</template>

方法2：用计算属性先过滤数据（更高效清晰） #

如果你的条件比较复杂，或者数据量较大，推荐先通过计算属性过滤出符合不同条件的数据集，再分别循环渲染。这样代码更清晰，而且计算属性会缓存结果，性能更好。

<script>
export default {
  data() {
    return {
      // 示例数据源
      plans: [
        { id: 1, type: 'free', isRecommended: false },
        { id: 2, type: 'premium', isRecommended: false },
        { id: 3, type: 'premium', isRecommended: true }
      ]
    };
  },
  computed: {
    // 过滤出免费计划
    freePlans() {
      return this.plans.filter(plan => plan.type === 'free');
    },
    // 过滤出非免费且非推荐的计划
    nonRecommendedPremiumPlans() {
      return this.plans.filter(plan => plan.type !== 'free' && !plan.isRecommended);
    },
    // 过滤出付费且推荐的计划
    recommendedPremiumPlans() {
      return this.plans.filter(plan => plan.type !== 'free' && plan.isRecommended);
    }
  }
};
</script>

<template>
  <table>
    <thead>
      <tr>
        <!-- 循环渲染免费计划 -->
        <th 
          v-for="plan in freePlans" 
          :key="plan.id"
          class="plan-header free"
        >
          <div class="pricing-plan-name">Free</div>
          <div class="pricing-plan-price">
            <sup>$</sup>0<span>.00</span>
          </div>
          <div class="pricing-plan-period">month</div>
        </th>

        <!-- 循环渲染非免费非推荐计划 -->
        <th 
          v-for="plan in nonRecommendedPremiumPlans" 
          :key="plan.id"
          class="plan-header blue"
        >
          <div class="pricing-plan-name">Not Free and not Recommended</div>
          <div class="pricing-plan-price">
            <sup>$</sup>0<span>.00</span>
          </div>
          <div class="pricing-plan-period">month</div>
        </th>

        <!-- 循环渲染付费推荐计划 -->
        <th 
          v-for="plan in recommendedPremiumPlans" 
          :key="plan.id"
          class="plan-header green"
        >
          <div class="pricing-plan-name">Recommended Premium Plan</div>
          <div class="pricing-plan-price">
            <sup>$</sup>9<span>.99</span>
          </div>
          <div class="pricing-plan-period">month</div>
        </th>
      </tr>
    </thead>
  </table>
</template>

小提示 #

• 动态绑定类名的时候，用对象语法（:class="{类名: 条件}"）比字符串拼接更易读和维护。
• 对于互斥的条件，使用v-if/v-else-if/v-else组合可以避免重复判断，让逻辑更清晰。

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