Vue ドキュメントの v-show ディレクティブの使用方法

<div v-show="condition">
  <!-- 
    在条件为真的情况下显示这个元素
   -->
</div>

<template>
  <div>
    <button @click="toggleDiv">Toggle Div</button>
    <div v-show="showDiv">
      This div will show/hide based on the showDiv variable
    </div>
  </div>
</template>

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

<template>
  <div>
    <h1>Welcome to my website</h1>
    <div v-show="loggedIn">
      <h2>Membership Plans</h2>
      <p>Become a member today to enjoy exclusive discounts and benefits!</p>
      <div class="card">
        <h3>Basic Plan</h3>
        <p>$10/mo</p>
      </div>
      <div class="card">
        <h3>Advanced Plan</h3>
        <p> $20/mo</p>
      </div>
    </div>
    <div v-show="!loggedIn">
      <h2>Sign Up or Log In to view Membership Plans</h2>
      <button>Login</button>
      <button>Sign Up</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loggedIn: false,
    };
  },
};
</script>