Vue：入门5（条件渲染)

块使用if
可以使用template元素，来包含多个元素
注意这个id不能和v-if放在同一个标签里，不然会报错-

<div id="id2" >
   <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
   </template>
   <div v-else>
      Now you don't
   </div>
</div>
<script>
   var vm2 = new Vue({
      el: '#id2',
      data: {
         ok:true,
      }
   });
</script>

v-else-if(2.1.0 新增)

<div id="id3">
   <div v-if="type === 'A'">
      A
   </div>
   <div v-else-if="type === 'B'">
      B
   </div>
   <div v-else-if="type === 'C'">
      C
   </div>
   <div v-else>
      Not A/B/C
   </div>
</div>
<script>
   var vm3 = new Vue({
      el: '#id3',
      data: {
         type:'D',
      }
   });
</script>

在下面的例子中，用户在input中如数的内容，在切换的时候不会被清空，变的只有placeholder里的内容

<div id="id4">
<template v-if="loginType === 'username'">
   <label>Username</label>
   <input placeholder="Enter your username">
</template>
<template v-else>
   <label>Email</label>
   <input placeholder="Enter your email address">
</template>
</div>
<script>
   var vm4 = new Vue({
      el: '#id4',
      data: {
         loginType:'username',
      }
   });
</script>

如果你想if else中的元素互不相关，可以使用key,那么每次切换都会重新渲染，不会保留用户之前填的内容。同时没用key都会复用比如label标签

<div id="id5">
   <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username">
   </template>
   <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email">
   </template>
</div>
<script>
   var vm5 = new Vue({
      el: '#id5',
      data: {
         loginType:'username',
      }
   });
</script>

v-show 只是简单地切换元素的 CSS 属性 display。v-show 不支持 元素，也不支持 v-else

<h1 id='id6' v-show="ok">Hello!</h1>
<script>
   var vm6 = new Vue({
      el: '#id6',
      data: {
         ok:true,
      }
   });
</script>