浅析Vue.js 中的条件渲染指令

<div id="app">
 <p v-if="type===1">拌面</p>
 <p v-else-if="type===2">扁肉</p>
 <p v-else="type===3">其它</p>
</div>

<script>
 var app = new Vue({
  el: '#app',
  data: {
   type: 2
  }
 });
</script>

<div id="app2">
 <template v-if="type==='菜单'">
  <p>拌面</p>
  <p>扁肉</p>
  <p>其它</p>
 </template>
</div>

var app2 = new Vue({
 el: '#app2',
 data: {
  type:'菜单'
 }
});

<div id="app2"><p>拌面</p> <p>扁肉</p> <p>其它</p></div>

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号</label>
  <input placeholder="请输入手机号">
 </template>
 <template v-else>
  <label>邮箱</label>
  <input placeholder="请输入邮箱">
 </template>
 <button @click="toggleAount">切换账号</button>
</div>

var app3 = new Vue({
 el: '#app3',
 data: {
  type: 'mobile'
 },
 methods: {
  toggleAount: function () {
   this.type = (this.type === 'mobile' ? 'mail' : 'mobile');
  }
 }
});

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号</label>
  <input placeholder="请输入手机号" key="mobile">
 </template>
 <template v-else>
  <label>邮箱</label>
  <input placeholder="请输入邮箱" key="email">
 </template>
 <button @click="toggleAount">切换账号</button>
</div>