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>