javascript - 创建切换/开关以显示不同的信息

Question

我对此很陌生，但我正在尝试重新创建一个切换按钮，无论单击月度还是年度按钮，都将显示月/年付款，类似于: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;
            }
        }
    }
}

Answer 1

您不一定需要 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, 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, 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.</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. 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, 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.</p>
  </div>
</div>