template标签的学习

发布时间 2023-04-16 20:53:17作者: yesyes1

template标签

我在引用这个标签的时候,本来还在纳闷,咋就他那么特殊,就他不显示,然后突然意识到,这个标签天生不可见,即display:none属性

可以在template标签里面放content模块,然后使用button点击事件实现内容的展现;

具体实现如下:

<template>
    <ul>
        <li>模块1</li>
        <li>模块2</li>
        <li>模块3</li>
    </ul>
</template>

<button onclick="display()">显示</button>

<script>
    function display(){
        let temp=document.getElementsByTagName("template")[0];
        var clo=temp.content.cloneNode(true);
        document.body.appendChild(clo);
    }

</script>

template标签还支持这些v-if、v-else-if、v-else、v-for指令

当然,通过为template的v-if属性赋值,也能够在另外一个角度实现template的display-->true