Vue 进阶（幺肆玖）：template 标签

关注

发布于: 刚刚

一、HTML5 中的 template 标签

html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性，天生不可见。

 <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template", 这是因为template标签天生不可见--><template>  <div>我是template</div></template><abc>我是自定义表现abc</abc>

复制代码

二、Vue 中的 template 标签

.vue 文件的基本结构如下：

<template>       ........</template>
<script>    export default {        name: "demo"    }</script>
<style scoped>    .demo {          font-size: 28px;    }</style>

复制代码

上面template标签是用来写 html 模板的，且内部必须只有一个根元素，像下面这样（不然 IDE 会报错）

<template>    <div class="demo">        .....    </div></template>

复制代码

但有时候我们也会看到，在template上使用for循环的写法：

<template>    <div class="root">        <!--在template上使用for循环-->        <template v-for="item,index in 5">            <div>{{index}}---{{item}}</div>        </template>    </div></template>

复制代码

下面我们一起通过浏览器dom渲染结果来看一下template结构是什么:

<template>    <div class="root">        <template>看看外面的标签是什么</template>    </div></template>

复制代码

在浏览器中解析完的结果：

可以看到文字外面是 div.root ，所以本质上的<template>标签并没有什么意义。template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template并不会被渲染到页面上.

我们继续看一下刚才的循环：

<template>    <div class="root">        <template v-for="(item,index) in 5">            <div>测试{{index}}</div>        </template>    </div></template>

复制代码

浏览器解析后的效果：

不使用template，我们也可以这样写：

<template>    <div class="root">        <div v-for="item,index in 5">            <div>测试{{index}}</div>        </div>    </div></template>

复制代码

但是这样循环出来会多出一层 div 来。

当我们不需要这外层的 div 的时候，我们可以采用上面在 <template>标签上使用 v-for来循环的方法。或者这样写：

<template>    <div class="root">        <div v-for="item,index in 5" :key="index">测试{{index}}</div>    </div></template>

复制代码

三、注意事项

vue实例绑定的元素内部template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

四、拓展阅读

《Vue进阶（幺叁贰）：ES实现数组合并》

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/fd2e80fd7a9c51482aed3423b】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺肆玖）：template 标签

一、HTML5 中的 template 标签

二、Vue 中的 template 标签

三、注意事项

四、拓展阅读

No Silver Bullet

评论