template
H5中的template标签中的内容在页面中不会显示是因为该标签自带属性:display: none;在VUE中,如果该标签放在vue实例绑定的元素内部,那么标签内的内容可显示在页面上,但dom结构中是不存在该标签的;但如果template标签并未在实例内部,那么内容不可显示,但dom结构中存在该标签:<div id="app"><template><div>可
·
- H5中的
template
标签中的内容在页面中不会显示是因为该标签自带属性:display: none
; - 在
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>
vue
实例绑定的元素内部的template
标签不支持v-show
,但支持v-if, v-else, v-for
;- 因为
v-if
是一个指令,故必须将它添加到一个元素上。当想要切换多个元素的时候,可以把一个<template>
元素当做不可见的包裹元素,并在上面使用v-if
。最终渲染结果将不包括<template>
元素。
<template v-if="isTrue">
<h1>title</h1>
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)