Vue JS - コンポーネントでv-ifを使用

Question

私はVueJSコンポーネントを使用して動的価格設定テーブルを作成しています。より静的な要素の1つは、チームプランに追加される「最も一般的な」ラベルです。私はv-ifを使ってaを表示し、最も人気があるとマークされたプランに余分なクラスを追加できるようにしたい。私は簡潔さのためにコードを単純化しました。

私は式の書式を設定する方法は複数ありましたが（現在は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

あなたは、文字列"true"ないtrueではなく、唯一の人気の計画にmost-popularタグを置くとして、それを考えていますので、あなたがmost-popular=trueを置いたときに、それが動作しませんBooleanなので、mostPopularプロパティタイプを検証する必要があります。

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">を使用してください。