Vue 条件付きレンダリング v-if と v-show

<div id="アプリ">
    <p v-if="weather == 'sun'">今日は公園に行きましょう！ </p>
    <p v-else-if="weather == 'rain'">今日は映画を見に行きましょう！ </p>
    <p v-else>今日はどこにも行きません! </p>
</div>
<スクリプト>
    vm = new Vue({
        el: "#app",
        データ： {
            天気: '太陽'
        }
    });
</スクリプト>
 

<div id="アプリ">
    <テンプレート v-if="年齢<18">
        <p>数学は何点ですか？ </p>
        <p>英語の点数はいくつですか？ </p>
    </テンプレート>
    <テンプレート v-else-if="年齢>=18 && 年齢<25">
        <p>あなたは結婚していますか？ </p>
        <p>大学院入試は受けましたか？ </p>
    </テンプレート>
    <テンプレート v-else>
        <p>給料は上がりましたか？ </p>
        <p>給料はいくらですか？ </p>
    </テンプレート>
</div>
<スクリプト>
    vm = new Vue({
        el: "#app",
        データ： {
            年齢: 24
        }
    });
</スクリプト>
 

<div id="アプリ">
  <テンプレート v-if="ログインタイプ === 'ユーザー名'">
    <label for="username">ユーザー名:</label>
    <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名">
  </テンプレート>
  <テンプレート v-else>
    <label for="email">メール</label>
    <input type="text" id="email" name="email" placeholder="メールアドレス">
  </テンプレート>
  <div>
    <button @click="changeLoginType">ログインタイプを切り替える</button>
  </div>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      ログインタイプ: "ユーザー名"
    },
    メソッド: {
      ログインタイプを変更する(){
        // タイプがユーザー名の場合はメールに切り替え、それ以外の場合は this.loginType = this.loginType==="username"?"email":"username";
      }
    }
  })
</スクリプト>

<div id="アプリ">
  <テンプレート v-if="ログインタイプ === 'ユーザー名'">
    <label for="username">ユーザー名:</label>
    <input type="text" id="ユーザー名" name="ユーザー名" placeholder="ユーザー名" key="ユーザー名">
  </テンプレート>
  <テンプレート v-else>
    <label for="email">メール</label>
    <input type="text" id="email" name="email" placeholder="Email" key="email">
  </テンプレート>
  <div>
    <button @click="changeLoginType">ログインタイプを切り替える</button>
  </div>
</div>

<h1 v-show="ok">こんにちは！</h1>