template标签

template标签，顾名思义，模板的意思
HTML5提供的新标签，更加规范和语义化
可以把列表项放入template标签中，然后进行批量渲染

注：template标签display属性默认为none

                <template id="tpl"><div class="linear-layout"><span>静音</span><i class="iconfont icon-duigou linear-icon"></i></div><div class="linear-interval"></div></template>

需要注意的是template标签的操作
直接使用原生JS操作，

var template = document.getElementById('tpl');
console.log(template);

获得到的DOM结构是这样的，可以看到中间有一层#document-fragment

所以要操作template里面的dom，不能直接用template，要用template.content，如下

var template = document.getElementById('tpl');
var layout = template.content.querySelector('div');
var text = template.content.querySelector('span');

template标签相关推荐

vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问题单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
template标签的用法总结
Template标签用法总结 - Happy work, happy life一.html5中的template标签html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结 ...
Vue进阶（幺肆玖）：template 标签
文章目录一.HTML5 中的 template 标签二.Vue 中的 template 标签三.注意事项四.拓展阅读一.HTML5 中的 template 标签 html5中template ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
Vue.js 使用script或template标签创建组件模板内容
为了使HTML代码和JavaScript代码是分离的,便于以后的阅读和维护,我们可以并建议使用<script>或<template>标签创建组件模板内容. <!DOCTY ...
关于template标签用法总结(含vue中的用法总结)
文章目录一.html5中的template标签二.template标签操作的属性和方法三.vue中的template 1.template标签在vue实例绑定的元素内部 2.vue实例中的tem ...
vue中的template标签
1.template标签,HTML5提供的新标签,更加规范和语义化 :可以把列表项放入template标签中,然后进行批量渲染 <template id="tem">& ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
Django - Template标签操作
Template变量和Template标签: 变量:{{ xxx }} 标签:{% tag %} load staticfiles url static if for csrf_token(跨站请求标 ...

template标签

template标签相关推荐

最新文章

热门文章