vue3 learning road-<template> tag

The difference between <template> tags in vue2 and vue3

The <template> tag in vue2 must have a top-level element

If there are multiple elements in the <template> tag, an error will be reported:

A parent element must be added:

 

 The <template> tag in vue3 can have multiple elements

<template> in vue3 can have multiple elements, and there is no need to add parent elements

 Use the v-if directive on the <template> tag to switch the display and hiding of multiple elements.

This function is supported by both vue2 and 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>

 

 The v-show directive is not supported on the <template> tag

vue3 also does not support it