vue中的template标签元素的应用

一、解释

  • <template>可以理解成是一个占位符,类似div一样,但是它是不可见
  • 官方解释说:可以把一个<template>元素当做不可见的包裹元素

二、使用场景

  • 在v-for列表循环中使用
  • 在v-if条件渲染中使用
  1. 在v-for列表循环中使用
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
  </template>
</ul>
  1. 在v-if条件渲染中使用
<template v-if="ok">
  <h1>如果变量 ok=true 我就会显示啦</h1>
</template>

三、多余的话

  • <template> 不会生成多余的标签
  • <template> 在使用中很方便,可以随意组合,而不用考虑 是用ul 还是 div 包裹呢,灵活度更高,相信大家在以后的使用中会喜欢它!

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×