浅析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>

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

<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=\"toggleAccount\">切换账号</button>
</div>

var app3 = new Vue({
 el: \'#app3\',
 data: {
  type: \'mobile\'
 },
 methods: {
  toggleAccount: 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=\"toggleAccount\">切换账号</button>
</div>