首页 > 其他 > 详细

vue里的templete

时间:2020-06-05 11:28:51      阅读:33      评论:0      收藏:0      [点我收藏+]

vue里的templete

定义:包裹元素

当不需要父元素的时候,直接用templete包裹,因为templete不会渲染出来。

使用:

①和v-if用。

      <!-- 用template包裹的 -->
      <template v-if="test">
        <p>测试1</p>
      </template>
      <!-- 用div包裹的 -->
      <div v-if="test2">
        <p>测试2</p>
      </div>

结果

templateme没有渲染出来。

技术分享图片

 

 

②和 v-for用。

    <template v-for="(item, index) in list">
      <span :key="index">{{item.key}}</span>
    </template>

结果

技术分享图片

 

 

扩展:

 不要在同一元素同时v-if和v-for,需要有条件的循环,把v-if放在外层。

例如

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

 

vue里的templete

原文:https://www.cnblogs.com/xieZhao/p/13047800.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!