template内容模板元素
前言
HTML内容模板元素只包含全局属性，是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。
将模板视为一个内容片段，存储在文档中供后续使用。虽然解析器在加载页面时确实会处理元素的内容，但这样做只是为了确保这些内容有效；然而，元素的内容不会被呈现。
比如需要ajax刷新一个列表，以前的做法是后端生成html返回，或者前端用DOM构建后加入，但现在有了template标签，html的架构就不需要程序管了，只需要在特定的位置加入ajax请求到的数据即可，比如img的src或者其他text之类的，然后clone这个DOM，加入列表。
模板元素示例
如下代码，验证了元素加载页面时不会呈现(显示)该元素和内容。
DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Documenttitle>
head>
<body>
<template><p>文字文字文字p>template>
body>
html>
运行后，页面没有任何元素及内容，F12审查元素后发现如图现象。
称为文档片段，我们展开看一下。
没错，这需要由JS来操控文档片段的内容才能显示出来，具体解释举例在前言中已经表明。
vue渲染模板元素
通过v-for指令在模板元素中渲染一个list列表
HTML:
<div id="app"><template><ul><li v-for="list in list">{{ list }}</li></ul></template>
</div>vue：
var vm = new Vue({el:'#app',data:{list:["张三","李四","王五"]},
})
如图，元素已经自动移除，只保留了我们想要渲染的结构与数据。
其实许多人以前也应该做过类似的事情，把一段html隐藏起来，然后clone它并修改里面的属性或者内容，得到一个DOM，加入列表并显示，用来刷新ajax列表。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！