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>

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

<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循环中的Free和Paid Html部分。

或请建议

Answer 1

组件付费：

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

Answer 2

我个人不会在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>

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

2 个答案: