vue中的template标签
1.template标签,HTML5提供的新标签,更加规范和语义化 ;可以把列表项放入template标签中,然后进行批量渲染<template id="tem"><div id="app"><h1 id=&q
·
1.template标签,HTML5提供的新标签,更加规范和语义化 ;可以把列表项放入template标签中,然后进行批量渲染
<template id="tem">
<div id="app">
<h1 id="title">hello world!</h1>
</div>
</template>
<script type="text/javascript">
var tem =document.getElementById("tem");//获取template标签
console.log(tem);
console.log(tem.innerHTML); //
var title = tem.content.getElementById("title"); //在template标签内部内容,必须要用.content属性才可以访问到
console.log(title);
</script>
在HTML页面中复制以上代码,发现在浏览器并没有渲染出任何信息,这是因为template标签内容天生不可见,设置了display:none;属性,同样我们也需要留意一些js操作template标签的具体事项:
var tem =document.getElementById("tem");//获取template标签
console.log(tem);
发现,在控制台输出的dom结构是这样的:
所以要操作template标签内部的dom必须要用下面的方法–content属性:
var tem =document.getElementById("tem");//获取template标签
var title = tem.content.getElementById("title"); //在template标签内部内容,必须要用.content属性才可以访问到
console.log(title);
**2.在非单组件文件的vue.js的程序里,常会见到一个标签,似乎在官网上也没有专门讲到这个标签。**
**那这个到底是什么玩意?**
实际上 元素是被当做一个不可见的包裹元素,主要用于分组的条件判断和列表渲染。
具体情况见官方文档:
1、“条件渲染”,其中的章节——在元素上使用v-if条件渲染分组
2、“条件渲染”——用key管理可复用的元素
3、“条件渲染”——v-show
4、“列表渲染”——v-for on a
5、“列表渲染”——v-for with v-if
更多推荐
已为社区贡献1条内容
所有评论(0)