如何解决创建切换/开关以显示不同的信息
我对此很陌生，但我正在尝试重新创建一个切换按钮，无论是按月还是按年按钮，都将显示月/年付款，类似于：https://search4less.com/#pricing。
我有 2 套价格卡，但我不确定如何连接切换开关，使其按预期工作。我在这个项目中使用了 vue。
任何帮助将不胜感激。
这是我使用的代码
<div class="container">
<label for="toggle_button">
<span v-if="isActive" class="toggle__label">Monthly</span>
<span v-if="! isActive" class="toggle__label">Annually</span>
<input type="checkBox" id="toggle_button" v-model="checkedValue">
<span class="toggle__switch"></span>
</label>
<b-row class="monthly">
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center">€20<small style="font-size:10px">/per user</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
Limitless access Irish business<br>
Intelligence information.
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>
</b-card-body>
<b-list-group class="content-center" flush>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center">€25<small style="font-size:10px">/per user</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
All of the Search4less features +<br>
any 1 of the following
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>
</b-card-body>
<b-list-group flush class="content-center">
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center price-colour">€30<small style="font-size:10px">/per user</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
All of the Search4less and<br>
Search4less plus features.
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>
</b-card-body>
<b-list-group class="content-center" flush>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
</b-row>
</div>
<b-row class="annually" hidden>
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center">€195<small style="font-size:10px">/per user p/a</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
Limitless access Irish business<br>
Intelligence information.
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>
</b-card-body>
<b-list-group class="content-center" flush>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Start Trial Now</b-button>
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center">€245<small style="font-size:10px">/per user p/a</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
All of the Search4less features +<br>
any 1 of the following
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>
</b-card-body>
<b-list-group flush class="content-center">
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Start Trial Now</b-button>
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
<b-col>
<b-card class="price-card">
<template #header>
<h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
</template>
<b-card-body>
<b-card-sub-title class="mb-2 content-center price-colour">€295<small style="font-size:10px">/per user p/a</small></b-card-sub-title>
<hr class="my-4">
<b-card-text class="content-center">
All of the Search4less and<br>
Search4less plus features.
</b-card-text>
<b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>
</b-card-body>
<b-list-group class="content-center" flush>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
<b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
</b-list-group>
<hr class="my-4">
<div style="text-align:center;">
<b-button variant="success">Start Trial Now</b-button>
<b-button variant="success">Subscribe Now</b-button>
</div>
</b-card>
</b-col>
</b-row>
</body>
</div>
</template>
<script>
export default {
name: 'Pricing',data() {
return {
currentState: false
}
},computed: {
isActive() {
return this.currentState;
},checkedValue: {
get() {
return this.defaultState
},set(newValue) {
this.currentState = newValue;
}
}
}
}
解决方法
您不一定需要 JavaScript：
body {
font-family: Arial,Helvetica,Verdana,sans-serif;
}
.cards {
display: flex;
}
.cards > div {
border: 1px solid silver;
border-radius: 5px;
padding: 2px 5px;
margin: 0 2px;
}
#toggle + label:before {
content: 'Monthly';
}
#toggle:checked + label:before {
content: 'Yearly';
}
#toggle:not(:checked) ~ .cards > :last-child {
display: none;
}
#toggle:checked ~ .cards > :first-child {
display: none;
}<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div class="cards">
<div>
<h3>Monthly</h3>
<p>Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div>
<h3>Yearly</h3>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
