尝试将多个条件放在一个循环 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>

免费网页

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

问题

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

我的意思是，我已经有了自由和非自由的条件。

我应该如何将推荐选项合并到循环线中

现在，我的代码只支持循环中的免费和付费 HTML 部分。

或请建议

Answer 1

出于多种原因，我不会在循环内部执行此操作，并且还会存储每个反映类的选项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>