vue3学习之路-＜template＞标签

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

 

 <template>标签上不支持使用v-show指令

vue3也同样不支持