关于template在html/vue中的用法（标签、属性、条件渲染、组件结构）

本文链接：https://blog.csdn.net/yolo_______95/article/details/127140568

本文介绍了HTML和Vue中template标签的使用，包括在HTML中作为隐藏模板和在Vue中用于条件渲染、构建组件结构。在Vue中，template与v-if、v-else-if、v-else、v-for指令结合，实现动态内容展示，同时在单文件组件中起到关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html中的template标签

使用<template>标签在页面加载时该标签中的内容不会显示。但是在后台查看页面DOM结构存在<template>标签。这是因为template标签天生不可见，它设置了display:none;属性。

<!--当前页面只显示"小猪佩奇"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template>
    <div>
        我是template
    </div>
</template>
<h1>小猪佩奇</h1>

如果想要显示<template>中的内容，可以加载后使用 JavaScript 来显示它。

<button onclick="showPig()">显示隐藏内容</button>
<template>
  <h1>小猪佩奇</h1>
</template>
     
<script>
function showPig() {
  var item = document.getElementsByTagName("template")[0]
  var clon = item.content.cloneNode(true);
  document.body.appendChild(clon);
  }
</script>

在这里插入图片描述如果有一些需要重复使用的 HTML 代码，也可以使用 <template> 设置为公用的模板。

二、vue中的template

1.条件渲染（v-if与`<template>标签`的配合使用）

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素，但是查看后台dom结构存在template标签。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="Vue/js/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="root">
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!-- v-if与template的配合使用 -->
    <template v-if="n === 1">
      <h1>小猪佩奇</h1>
    </template>
    <hr>
    <h2>{{name}}</h2>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data: {
        name: '小猪猪',
        n: 0
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

2.配置组件结构(`template属性`)

将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。

  <!-- Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签) -->
  <div id="root">
    <!-- 第三步：编写组件标签 -->
    <pig></pig>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false

    //第一步：创建pig组件
    const pig = Vue.extend({
      template: `
      <div class="pig">
        <h2>小猪名称：{{pigName}}</h2>
        <button @click="showName">点我提示小猪名</button>	
      </div>
    `,
      // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      data() {
        return {
          pigName: '佩奇',
        }
      },
      methods: {
        showName() {
          alert(this.pigName)
        }
      },
    })
    //创建vm
    new Vue({
      el: '#root',
      //第二步：注册组件（局部注册）
      components: {
        pig
      }
    })
  </script>

在这里插入图片描述

3.配置单文件组件

创建.vue文件时使用<v快捷键创建vue结构。

<template>
  <div class="pig">
    <h2>小猪名称：{{ pigName }}</h2>
    <button @click="showName">点我提示小猪名</button>
  </div>
</template>

<script>
	//引入组件
export default {
    name:'Pig',
    data() {
        return {
            pigName:'佩奇'
        }
    },
    methods: {
            showName(){
                alert(this.name)
            }
        },
}
</script>

<style>
	.demo{
		background-color: pink;
	}
</style>