1. H5中的template标签中的内容在页面中不会显示是因为该标签自带属性:display: none
  2. VUE中,如果该标签放在vue实例绑定的元素内部,那么标签内的内容可显示在页面上,但dom结构中是不存在该标签的;但如果template标签并未在实例内部,那么内容不可显示,但dom结构中存在该标签:
<div id="app">
	<template>
		<div>可显示内容但dom中无template标签</div>
	<template>
</div>
<template>
	<div>不可显示内容但dom中可找到template标签</div>
</template>
<script src="......vue.js"></script>
<script>
	let vm = new Vue({
		el: "#app",
	})
</script>
  1. vue实例绑定的元素内部的template标签不支持v-show,但支持v-if, v-else, v-for
  2. 因为v-if是一个指令,故必须将它添加到一个元素上。当想要切换多个元素的时候,可以把一个<template>元素当做不可见的包裹元素,并在上面使用v-if。最终渲染结果将不包括<template>元素。
<template v-if="isTrue">
	<h1>title</h1>
</template>
Logo

前往低代码交流专区

更多推荐