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>

歡迎關注，會同步更新，隨時隨地一起學習
微信公衆號：教練我想學PHP
天天快報、騰訊新聞和QQ瀏覽器：教練我想學PHP