HTML和Vue中template标签的不同表现以及与v-if的结合使用

最新推荐文章于 2024-06-18 23:28:14 发布

coycs

最新推荐文章于 2024-06-18 23:28:14 发布

阅读量1.4k

点赞数

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/m0_58201165/article/details/132338308

版权

HTML中使用`<template>`：

<template>：内容模板元素 - HTML（超文本标记语言） | MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template
HTML <template> 标签：https://www.w3school.com.cn/tags/tag_template.asp

`<template>`特性

根据MDN的定义： HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。

这个标签的目的是： 将模板视为一个可存储在文档中以便后续使用的内容片段，如果有一些需要重复使用的 HTML 代码，则可以使用 <template> 标记。

虽然解析器在加载页面时确实会处理 <template> 元素的内容，但这样做只是为了确保这些内容有效,元素内容不会被渲染。

举个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
    <style>
      body {
        text-align: center;
        color: black;
      }
    </style>
  </head>
  <body>
    <template id="template">content</template>
  </body>
</html>

可以发现实际会渲染出一个template标签且有id，但并没有看到内容，因为其默认样式是隐藏的：
在这里插入图片描述

使用`<template>`

检测是否能用template标签：

if (document.createElement("template").content) {}
if ("content" in document.createElement("template")) {}

一般的使用流程：
要想让template里的内容显示出来就要用javascript把template里的内容转移到template外。

获取<template>的引用：querySelector
克隆<template>的内容：importNode
嫁接<template>的内容：appendChild

举个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      background: #000;
    }
    table td {
      background: #fff;
    }
  </style>
  <body>
    <table id="producttable">
      <thead>
        <tr>
          <td>UPC_Code</td>
          <td>Product_Name</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <template id="productrow">
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
    </template>
    <script>
      if ('content' in document.createElement('template')) {
        // 获取template引用
        let t = document.querySelector('#productrow')
        // 克隆template内容
        let clone = document.importNode(t.content, true)
        // 嫁接template内容
        let tb = document.getElementsByTagName('tbody')
        tb[0].appendChild(clone)
      } else {
      }
    </script>
  </body>
</html>

在这里插入图片描述

Vue中使用`<template>`

举个例子：

<html>

<head>
  <title>VueJs 在线编辑器</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
  </script>
</head>

<body>
  <div id="intro" style="text-align:center;">
    <template id="template">
      template content
    </template>
  </div>
  <script type="text/javascript">
    var vue_det = new Vue({
      el: '#intro',
      data: {
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

查看渲染结果可以发现没有template标签只有template的内容，自然也没有template上的id。

结合v-if进行使用：

  <div id="intro" style="text-align:center;">
    <template id="template" v-if="status">
      template content
    </template>
  </div>

status为true时和没有使用v-if时一样，为false时：
在这里插入图片描述
可以发现完全没有template元素。

coycs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML和Vue中template标签的不同表现以及与v-if的结合使用

一般的操作流程：1、获取template的引用：querySelector；2、克隆template的内容：importNode；3、嫁接template的内容：appendChild
复制链接

扫一扫