Vue JS - 使用v-if与组件

Question

我正在使用VueJS组件创建动态定价表格。其中一个更加“静态”的元素是“最受欢迎”标签，该标签被添加到团队计划中。我想使用v-if来显示一个div，并在标记为最受欢迎的计划上添加额外的类。出于简洁起见，我已经简化了代码。

您可以看到，我尝试了多种格式化表达式的方式（当前在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';
    });

- GuerillaRadio

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>

- Rifki

---

这正是我想要做的。非常感谢。 - GuerillaRadio

Answer 2

使用<template v-if="ok">进行条件渲染。

- seoppc