Vue JS - 在組件中使用v-if

Question

我使用VueJS組件創建動態定價表。 「靜態」元素之一是添加到團隊計劃中的「最受歡迎」標籤。我希望能夠使用v-if在標記爲最受歡迎的計劃上顯示並添加額外的類。爲簡潔起見，我簡化了代碼。

你可以看到我已經嘗試過多種格式化表達式的方法（當前v-bind和v-if不同），但我不確定這種方法是否可行。

這裏是HTML。

<div id="app"> 
<ul class="plans"> 
      <plan-component : 
          name="Basic" 
          most-popular=false 
      ></plan-component> 

      <plan-component : 
          name="Recreational" 
          most-popular=false 
      ></plan-component> 

      <plan-component : 
          name="Team" 
          most-popular=true 
      ></plan-component> 

      <plan-component : 
          name="Club" 
          most-popular=false 
      ></plan-component> 
</ul> 

      <template id="plan-component"> 
      <li v-bind:class="{ 'most-popular': mostPopular == true }"> 
       <template v-if="most-popular === true"> 
       <span class="popular-plan-label">Most popular</span> 
       </template> 
       <p>{{ name }}</p> 
      </li> 
      </template> 
</div> 

這裏是JS。

Vue.component('plan-component', { 
     template: '#plan-component', 

     props: ['name', 'mostPopular'], 

    }); 

    new Vue({ 
     el: '#app'; 
    }); 

Answer 1

您需要驗證mostPopular屬性類型，因爲它是Boolean當你把most-popular=true，因爲它被認爲是一個字符串"true"沒有true而不是把most-popular標籤上只有流行的計劃將無法正常工作。下面是例子：

Vue.component('plan-component', { 
 
    template: '#plan-component', 
 
    props: { 
 
     name: String, 
 
     mostPopular: { 
 
      type: Boolean, 
 
      default: false, 
 
     } 
 
    }, 
 
}); 
 

 
new Vue({ 
 
    el: '#app' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <ul class="plans"> 
 
     <plan-component name="Basic"></plan-component> 
 
     
 
     <plan-component name="Recreational"></plan-component> 
 
     
 
     <plan-component name="Team" most-popular></plan-component> 
 
     
 
     <plan-component name="Club"></plan-component> 
 
    </ul> 
 
</div> 
 

 
<template id="plan-component"> 
 
    <li v-bind:class="{ 'most-popular': mostPopular }"> 
 
     <p>{{ name }} <small v-if="mostPopular" class="popular-plan-label" style="color: red">Most popular</small></p> 
 
    </li> 
 
</template>

Answer 2

使用<template v-if="ok">進行條件呈現。