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>