码迷,mamicode.com
首页 > 其他好文 > 详细

vue v-for与v-if组合使用

时间:2018-04-24 17:40:43      阅读:789      评论:0      收藏:0      [点我收藏+]

标签:条件   优先   scom   vuejs   font   https   节点   ejs   guide   

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的_一些_项渲染节点时,这种优先级的机制会十分有用,如下:

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

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

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

 

vue v-for与v-if组合使用

标签:条件   优先   scom   vuejs   font   https   节点   ejs   guide   

原文地址:https://www.cnblogs.com/mengfangui/p/8931002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!