在此,可以把一个 元素当做不可见的包裹元素。
常用场景如下:

1,比如说当v-for和v-if要在同一个元素上时,而vue又不允许这样使用,这时而又不想新增一个标签,这里,就可以在v-for的外层使用template标签,在template上使用v-if

<template v-if="true">
     <div v-for="item in list" :key="item.id"></div>
</template>

2,比如说可以用在那些个HTML指定的上下级标签上,例如,你想在父元素上写ul,在子元素内写li时

//父组件
<ul>
     <Item></Item>
</ul>

子组件Item
<template>
    <li></li>
</template>

难道你就没有疑问,为什么在使用vue-cli脚手架时,最上层都会是一个template标签,如果你知道vue的html元素整体必须包裹在一个标签内,这个也就是说,我们也可以把这个template标签换成其它标签,毫无疑问,可以,但是你会发现当你审查元素时,使用template时,源代码中没有这个元素,而使用其它元素时,就会有相应的元素,这就是template标签相比其它标签所没有的优势,不可见。

Logo

前往低代码交流专区

更多推荐