vue3学习之路-＜template＞标签

最新推荐文章于 2025-10-02 18:14:31 发布

原创最新推荐文章于 2025-10-02 18:14:31 发布 · 5.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue2 #vue3 #template标签

web 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了<template>标签在Vue2和Vue3中的差异，指出Vue2中<template>需要一个顶级元素，而在Vue3中则允许有多个元素。同时，文章提到了<template>支持在vue2和vue3中使用v-if指令来切换元素显示，但都不支持v-show指令。

<template>标签在vue2、vue3中的不同

vue2中<template>标签必须有个顶级元素

如果<template>标签中有多个元素会报错：

必须添加一个父级元素：

vue3中<template>标签可以有多个元素

vue3中<template>可以有多个元素,不需要添加父元素

<template>标签上使用v-if指令切换多个元素的显示与隐藏

该功能vue2和vu3都支持

<template>
  <div>
    <template v-if="isShow">
      <div>这是一个div标签</div>
    </template>
    <template v-else>
      <p>这是一个p标签</p>
    </template>

    <button @click="changeFlag()">切换</button>
  </div>
</template>
<script>
export default {
  name: "TemplateDemo",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    changeFlag() {
      this.isShow = !this.isShow;
    },
  },
};
</script>