Vue中如何使用v-show与v-if结合实现动态页面渲染

<template>
  <div>
    <h1 v-show="showTitle">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

<template>
  <div>
    <h2 v-if="isLoggedIn">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

<template>
  <div>
    <div v-if="isActivated">
      <h3>Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3>Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>