Question

我使用VueJS组件创建动态定价表。其中一个更静态的＆＃39;元素是最受欢迎的元素。添加到团队计划中的标签。我希望能够使用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"而不是{{ 1}}而是仅将true标记放在热门计划上。这是一个例子：

most-popular

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

Answer 2

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

Vue JS - 使用v-if和组件

2 个答案: