<div id="app">
    <p v-if="weather == 'sun'">今天去公園玩！</p>
    <p v-else-if="weather == 'rain'">今天去看電影！</p>
    <p v-else>今天哪兒也不去！</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            weather: 'sun'
        }
    });
</script>
 

<div id="app">
    <template v-if="age<18">
        <p>數(shù)學(xué)多少分？</p>
        <p>英語(yǔ)多少分？</p>
    </template>
    <template v-else-if="age>=18 && age<25">
        <p>結(jié)婚了嗎？</p>
        <p>考研究生了嗎？</p>
    </template>
    <template v-else>
        <p>加薪了嗎？</p>
        <p>工資多少？</p>
    </template>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 24
        }
    });
</script>
 

<div id="app">
  <template v-if="loginType === 'username'">
    <label for="username">用戶(hù)名：</label>
    <input type="text" id="username" name="username" placeholder="用戶(hù)名">
  </template>
  <template v-else>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="郵箱">
  </template>
  <div>
    <button @click="changeLoginType">切換登錄類(lèi)型</button>
  </div>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      loginType: "username"
    },
    methods: {
      changeLoginType(){
        // 如果類(lèi)型為username，則切換成email，否則反之
        this.loginType = this.loginType==="username"?"email":"username";
      }
    }
  })
</script>

<div id="app">
  <template v-if="loginType === 'username'">
    <label for="username">用戶(hù)名：</label>
    <input type="text" id="username" name="username" placeholder="用戶(hù)名" key="username">
  </template>
  <template v-else>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="郵箱" key="email">
  </template>
  <div>
    <button @click="changeLoginType">切換登錄類(lèi)型</button>
  </div>
</div>

<h1 v-show="ok">Hello!</h1>