Use css style to write two boxes, and use v-if v-show and event instructions to show the hidden effect

The following answers are quoted from GPT-3 model, please use them wisely:

示例

<template> 
    <div> 
        <div class="box-1" v-show="showBox1">Box 1div>
        <div class="box-2" v-if="showBox2">Box 2div>
        <input type="button" @click="handleClick" value="切换"/>
    div>
template>

<script>
    export default {
        data() {
            return {
                showBox1: true,
                showBox2: false
            }
        },
        methods: {
            handleClick(){
                this.showBox1 = !this.showBox1;
                this.showBox2 = !this.showBox2;
            }
        }
    }
script>

<style>
    .box-1{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
    .box-2{
        width: 200px;
        height: 200px;
        background: #333;
    }
style>

Please accept my answer if it answers your question

This answer partially references GPT, GPT_Pro to better solve the problem
Use v-if v-show and event instructions to show hidden effects, The first step is to write two boxes in the css style, the show box and the hide box.

In HTML, use v-if to realize the function of show and hide, put the v-if of show box and hide box in different positions, and then use a variable show to control, when the value of show is true, show box will be shown, and hide box will be hidden; When the value of show is false, the display box is hidden, and the hide box is displayed.

<div id="app">
  <div v-if="show">显示盒子div>
  <div v-else>隐藏盒子div>
div>

An alternative is to use v-show to show hidden effects, simply by placing the show variable in v-show's place in the HTML. When show is true, the display box is displayed and the hide box is hidden; When the value of show is false, the display box is hidden, and the hide box is displayed.

<div id="app">
  <div v-show="show">显示盒子div>
  <div v-show="!show">隐藏盒子div>
div>

The final method is to use event instructions to show hidden effects. Use the @click event in HTML to control the value of the variable show. When the value of show is true, the show box is displayed and the hide box is hidden; When the value of show is false, the display box is hidden, and the hide box is displayed.

<div id="app">
  <div @click="show=true">显示盒子div>
  <div @click="show=false">隐藏盒子div>
div>

If the answer is helpful, please accept it.