我正在使用VueJS组件创建动态定价表格。其中一个更加“静态”的元素是“最受欢迎”标签,该标签被添加到团队计划中。我想使用v-if来显示一个div,并在标记为最受欢迎的计划上添加额外的类。出于简洁起见,我已经简化了代码。
您可以看到,我尝试了多种格式化表达式的方式(当前在v-bind和v-if之间不同),但我不确定是否可能采用这种方法。
以下是HTML代码:
您可以看到,我尝试了多种格式化表达式的方式(当前在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';
});