vue中的template标签

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

vue中的template标签相关推荐

React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法作者:高玉涵时间:2022.7.20 ...
Vue中的template标签的使用和在template标签上使用v-for
我们知道 .vue 文件的基本结构是: <template>........ </template><script>export default {name: &q ...
Vue中模板template的四种写法
<div id="app"><h1>我是直接写在构造器里的模板1</h1> </div><template id=" ...
ie模版字符串_字符串模板、模板字符串、Vue中使用template等等。
1:模板字符遇新是直朋能到串传统的一如分算需上来处一定迹面数一跳这件我子作JS语言,输出模板新直能分支调二浏页器朋代说,事刚需求是这样写的: $('#result').append( 'There ...
vue中实现tag标签
1,安装scss插件 cnpm i node-sass sass-loader -S 2,安装element-ui cnpm i element-ui -S main.js中引入element-ui ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...
Vue中使用a标签实现点击在新标签页中打开实现照片预览
场景显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众 ...
vue中使用a标签下载静态资源文件（比如excel、pdf等）后端不参与
问题描述平常我们在项目中需要做下载文件的功能,比如下载excel表格.比如下载pdf文件.比如下载word文档,这样的功能,一般是后端做,即:后端返回一个流文件.或者返回一个url地址- 但是,实际 ...

vue中的template标签

vue中的template标签相关推荐

最新文章

热门文章