首页 前端知识 HTML和Vue中template标签的不同表现以及与v-if的结合使用

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

2024-04-29 11:04:38 前端知识 前端哥 572 973 我要收藏

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外。

  1. 获取<template>的引用:querySelector
  2. 克隆<template>的内容:importNode
  3. 嫁接<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元素。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6342.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!