Vue JS - 구성 요소에 v-if 사용

Question

VueJS 구성 요소를 사용하여 동적 가격 책정 테이블을 만듭니다. '정적'요소 중 하나는 팀 계획에 추가되는 '가장 대중적인'레이블입니다. 나는 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" 대신 인기 계획 만에 most-popular 태그를 넣지 true 문자열로 간주하기 때문에 당신이 most-popular=true을 배치 할 때 작동하지 않습니다는 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">을 사용하십시오. 이 Boolean 이후