首页 > 其他分享 >tempate标签的使用

tempate标签的使用

时间:2023-06-10 23:00:47浏览次数:29  
标签:tempate template 标签 content 模块 使用 display

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

标签:tempate,template,标签,content,模块,使用,display
From: https://www.cnblogs.com/liuzijin/p/17472148.html

相关文章

  • pullup和pulldown在verilog中的使用方法
    0前言这段时间涉及到了IO-PAD,在IO-PAD的RTL的时候注意到了pullup和pulldown,对这个知识比较好奇,就研究了一下,顺便记录下来,IO-PAD的内容等我再研究研究再考虑记录吧>_<1pullup和pulldown的介绍pullup和pulldown并非是verilog的内置原语,仅在仿真或综合过程中起作用,用来设置信号......
  • iptables使用详解
    一、iptables简介iptables是linux自带的一款防火墙工具,它能帮助我们基于规则完成数据包过滤、数据包重定向和网络地址转换功能。   严格的说,iptables其实不是真正的防火墙,我们可以把它理解成一个客户端代理,用户通过iptables这个代理,将用户的安全设定执行到对应的”安全框架”......
  • spdlog使用头文件或dll的宏设置
    宏作用SPDLOG_HEADER_ONLYspdlog只使用头文件FMT_HEADER_ONLYfmtlib只用用头文件SPDLOG_COMPILED_LIBspdlog使用dllSPDLOG_SHARED_LIBspdlog使用dll,实际可以不设置,单独设置SPDLOG_COMPILED_LIB就可以SPDLOG_ACTIVE_LEVEL=SPDLOG_LEVEL_TRACESPDLOG_TRAC......
  • libevent使用
    //testlibevent.cpp:此文件包含"main"函数。程序执行将在此处开始并结束。//#include"event2/event.h"#include"event2/listener.h"#include"event2/thread.h"#include<event2/listener.h>#include<iostream>voidlisten_cb(......
  • Python Joblib库使用学习总结
    实践环境python3.6.2Joblib简介Joblib是一组在Python中提供轻量级流水线的工具。特别是:函数的透明磁盘缓存和延迟重新计算(记忆模式)简单易用的并行计算Joblib已被优化得很快速,很健壮了,特别是在大数据上,并对numpy数组进行了特定的优化。主要功能输出值的透明快速磁盘......
  • 使用matlab的LTIViewer完成系统稳定性判定
    如题:一、建立模型:z=[-3];p=[0-2-5];k=3;G=zpk(z,p,k)G=3(s+3)-------------s(s+2)(s+5)Continuous-timezero/pole/gainmodel.ModelProperties>>Gf=feedback(G,1)Gf=3(s+3)--------------------------------......
  • 小米6刷origin os使用joviincar教程
    小米6刷originos使用joviincar教程此教程尽量简化流程,在不用扩容分区的情况下直接刷入originos实现joviincar的使用。1、前期准备1)解锁米62)工具集准备Adb工具集(https://www.xitongzhijia.net/soft/218036.html)Originos卡刷包(https://www.ziyuanyo.com/html/34......
  • 关于刚使用ABP.VNext遇到的坑
    使用的是开源的项目,项目链接:https://github.com/abpframework/abp-samples/tree/master/BookStore-Mvc-Efcore跑的项目是这个大项目下的小项目,在文件夹里面找到这个文件夹就是我用的这个项目文件喽BookStore-Mvc-EfCore 第一个肯定就是生成数据库啦项目第一步生成数据库......
  • 使用 Vue 和 Swiper 实现中间大两边小的轮播图效果
    以下是使用Vue和Swiper实现中间大两边小的轮播图效果的代码:1.安装Swiper:npminstallswiper--save 2.在Vue组件中引入Swiper:importSwiperfrom'swiper';import'swiper/css/swiper.css'; 3.在Vue组件中使用Swiper:<template><divclass="swip......
  • CSS_显示某块和标签嵌套
    一、显示模块1、块级元素特点:1.独占一行(一行只能显示一个)2.宽度默认是父元素的宽度,高度默认由内容撑开3.可以设置宽高例如:div、p、h系列、ul、li、dl、dt、dd、form、header、.nav、footer.2、行内元素特点:1.一行可以显示多个2.宽度和高度默认由内容撑开3.不可以设......