试图将多个条件放在一个循环 vue.js 中

Question

付费 HTML

<th 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>

免费 HTML

<th 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>

非免费和推荐的 Html

<th class="plan-header plan-header-standard">
    <div class="inner">
        <!--<span class="plan-head"> </span>-->
        <span class="recommended-plan-ribbon">RECOMMENDED</span>
        <div class="pricing-plan-name">STANDARD</div>
        <div class="pricing-plan-price">
            <sup>$</sup>34<span>.99</span>
        </div>
        <div class="pricing-plan-period">month</div>
    </div>
</th>

下面是我在 vue.js 中 for 循环中的代码。

<th v-for="Record in Records" class="plan-header" :class="Record.Is_Free ? 'free':'blue'">
    <div class="pricing-plan-name">{{ Record.Description }}</div>
    <div class="pricing-plan-price">
        <sup>$</sup>0<span>.00</span>
    </div>
</th>

问题

我必须将推荐模板也放在条件中。我可以在同一个循环中做吗？

我的意思是，我已经有了免费和非免费的条件。

我应该如何在同一 for 循环行中合并推荐选项

目前，我的代码只支持 for 循环内的免费和付费 Html 部分。

或者请推荐

Answer 1

出于多种原因，我个人不会在 for 循环中执行此操作，并且还会存储 type 的每个反映类的选项（将来无需条件更新，只需样式），但你在这里：

<th v-for="Record in Records" class="plan-header" :class="{free: Record.Is_Free, 'blue': !Record.Is_Free && !Record.Is_Recommended, 'plan-header-standard': Record.Is_Recommended}">
    <span v-if="Record.Is_Recommended" class="recommended-plan-ribbon">RECOMMENDED</span>
    <div class="pricing-plan-name">{{ Record.Description }}</div>
    <div class="pricing-plan-price">
        <sup>$</sup>{{Math.floor(price)}}<span>{{(price+"").split(".")[1]}}</span>
    </div>
</th>

Answer 2

组件付费：

<template>
    <th class="plan-header blue">
        <div class="pricing-plan-name">Not Free and not Recommended</div>
        <div class="pricing-plan-price">
            <sup>$</sup>{{item.price}}0<span>.00</span>
        </div>
        <div class="pricing-plan-period">month</div>
    </th>
</template>

export default{
    props: ['item']
}

无组件：

<template>
    <th class="plan-header free">
        <div class="pricing-plan-name">Free</div>
        <div class="pricing-plan-price">
            <sup>$</sup>{{item.price}}0<span>.00</span>
        </div>
        <div class="pricing-plan-period">month</div>
    </th>
</template>

export default{
    props: ['item']
}

组件推荐：

<template>
    <th class="plan-header plan-header-standard">
        <div class="inner">
            <!--<span class="plan-head"> </span>-->
            <span class="recommended-plan-ribbon">RECOMMENDED</span>
            <div class="pricing-plan-name">STANDARD</div>
            <div class="pricing-plan-price">
                <sup>$</sup>{{item.price}}34<span>.99</span>
            </div>
            <div class="pricing-plan-period">month</div>
        </div>
    </th>
</template>

export default{
    props: ['item']
}

你的循环代码：

<template v-for="Record in Records">
    <component :item="Record" :is="Record.Is_Free?'Free':Record.Is_Recommended?'Recommended':'Paid'"></component>
</template>

const Free = {
  template: '#Free',
  props: ['item']
},Paid = {
  template: '#Paid',
  props: ['item']
},Recommended = {
  template: '#Recommended',
  props: ['item']
}

var app = new Vue({
  el: '#app',
  components: {Free,Paid,Recommended},
  data () {
    return {
      list: [{
        id: 1,
        text: 'free product',
        isFree: true,
        isRecommended: true
      },{
        id: 2,
        text: 'Not Free and not Recommended',
        isFree: false,
        isRecommended: false
      },{
        id: 3,
        text: 'Recommended',
        isFree: false,
        isRecommended: true
      }]
    }
  }
})		

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	  <table>
	    <thead>
	      <template v-for="item in list">
	        <component :item="item" :is="item.isFree?'Free':item.isRecommended?'Recommended':'Paid'"></component>
	      </template>
	    </thead>
	  </table>
	</div>
	<script type="text/x-template" id="Free">
	    <th class="plan-header free">
	        <div class="pricing-plan-name">Free</div>
	        <div class="pricing-plan-price">
	            <sup>$</sup>{{item.price}}0<span>.00</span>
	        </div>
	        <div class="pricing-plan-period">month</div>
	    </th>
	</script>
	<script type="text/x-template" id="Paid">
	    <th class="plan-header blue">
	        <div class="pricing-plan-name">Not Free and not Recommended</div>
	        <div class="pricing-plan-price">
	            <sup>$</sup>{{item.price}}0<span>.00</span>
	        </div>
	        <div class="pricing-plan-period">month</div>
	    </th>
	</script>
	<script type="text/x-template" id="Recommended">
	    <th class="plan-header plan-header-standard">
	        <div class="inner">
	            <!--<span class="plan-head"> </span>-->
	            <span class="recommended-plan-ribbon">RECOMMENDED</span>
	            <div class="pricing-plan-name">STANDARD</div>
	            <div class="pricing-plan-price">
	                <sup>$</sup>{{item.price}}34<span>.99</span>
	            </div>
	            <div class="pricing-plan-period">month</div>
	        </div>
	    </th>
	</script>