vue學習中v-if和v-show一起使用的問題

v-if和v-show一起使用

在開發項目過程中v-if和v-show一起使用時，接下面跟着的v-else會在頁面上面顯示兩次 。代碼如下：

<tbody class="sortable" id="sortTable">
      <tr v-show="items.length" v-for="(item,index) in items" :item="item">
             <td :id="item.objectId">{{index+1}}</td>
             <td>{{item.number}}</td>
      </tr>
      <tr v-else>
              <td colspan='2'>暫無數據</td>
     </tr>
</tbody>

原因其實很簡單，根據vue的文檔描述：
當它們都處於同一節點時，v-for 的優先級高於 v-if。這意味着，v-if 將分別在循環中的每次迭代上運行。
也就是v-if會判斷兩次。

當然這樣用也有它的好處，當你只想將某些項渲染為節點時，這會非常有用，如下：(以上只渲染 todos 中未完成的項。)

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

如果你的意圖與此相反，是根據條件跳過執行循環，可以將 v-if 放置於包裹元素上（或放置於

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>