【Vue】template 模板用法_vue template-程序员宅基地

技术标签: template  Vue 全家桶  vue  

一、在HTML5中

  • template标签:其内容隐藏在客户端之外
  • 该内容在加载页面是不会呈现,不会渲染出任何信息
  • 相当于自带属性:template {display: none;}
<body>
    <template>
    	<!-- 该标签内容是不可见的 -->
        内容模板元素
    </template>
</body>
  • 在css中设置属性可见
<style>
    template{
      
        display: block;
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }
</style>
<body>
    <template>
    <!-- 该标签内容依旧是不可见的 -->
        内容模板元素
    </template>
</body>

在这里插入图片描述
在这里插入图片描述

二、在JavaScript中

  • content属性:返回template元素的模板内容(一个 DocumentFragment)
  • template对象.content语法:可以调用getElementByIdquerySelectorquerySelectorAll方法来获取里面的子节点。其他方法不行。
  • innerHTML属性:可以获取template标签中的html
  • innerText属性:可以设置template标签中的内容(可见的)
<body>
    <template id="tem">
        内容模板元素
        <h1 id="hh">模板元素</h1>
    </template>
</body>
<script>
    var tem = document.getElementById('tem');
    console.log('tem:',tem);
    console.log('tem.content:',tem.content);
    
    // var hh = tem.getElementById('hh'); 获取不到,报错
    //在template标签内部内容,必须要用.content属性才可以访问到
    var hh = tem.content.getElementById('hh');
    console.log('hh:',hh);

    console.log('tem.innerHTML:',tem.innerHTML);
    console.log('tem.innerText:',tem.innerText);
</script>

在这里插入图片描述

三、在Vue中

3.1、写在vue构造器里

<body>
    <div id="app">

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
      
        el:"#app",
        template:`<h1>我是模板</h1>`
    })
</script>

在这里插入图片描述

3.2、写在template标签里

<body>
    <div id="app">
        <template id="tem">
            <h1>我是模板</h1>
        </template>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
      
        el:"#app",
        template:"#tem"
    })
</script>    

在这里插入图片描述

3.3、写在script标签里(官方推荐)

  • type属性设置为x-template
<body>
    <div id="app">

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="x-template" id="tem">
    <h1>我是模板</h1>
</script>
<script>
    var app = new Vue({
      
        el:"#app",
        template:"#tem"
    })
</script>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45677671/article/details/115321988

智能推荐

L1-014. 简单题_输出事实this-程序员宅基地

文章浏览阅读3.1w次。https://www.patest.cn/contests/gplt/L1-014这次真的没骗你 —— 这道超级简单的题目没有任何输入。你只需要在一行中输出事实:“This is a simple problem.”就可以了。#include &lt;iostream&gt;#include &lt;cstdio&gt;using namespace std;int main(){..._输出事实this

Multipathd Daemon was Unable to Set Options "fast_io_fail_tmo" or "dev_loss_tmo" Under UEK1 or RHCK_multipath rport failed to read dev_loss_tmo value -程序员宅基地

文章浏览阅读421次。Multipathd Daemon was Unable to Set Options "fast_io_fail_tmo" or "dev_loss_tmo" Under UEK1 or RHCK (文档 ID 1678794.1) APPLIES TO:Linux OS - Version Oracle Linux 5.7 with Unbreakable Enterprise Ker..._multipath rport failed to read dev_loss_tmo value error 2

Jython_Jython Development Tools (JyDT) for Eclipse_jythontools-程序员宅基地

文章浏览阅读729次。Installing JyDTThis section describes how to install JyDT by connecting to the JyDT update siteon the internet. If you have downloaded an update site to a computer on your network, please follow the_jythontools

验证结构中IMonitor的作用_验证 monitor组件的主要功能-程序员宅基地

文章浏览阅读922次。DUT 的 input 端口采用的monitor 是干嘛的呢?根据白书: 一,大型项目中,driver 根据协议发送数据,而monitor根据协议接收数据。如果driver和monitor由不同人实现,那么可以大大减少其中任意一方对协议理解的错误。二,便于复用???另外,我的一点理解是:用于判断是否真的将输入,打入了DUT。????就一般环境,IF与dri_验证 monitor组件的主要功能

kubernetes apiserver 报错 service-account-issuer is a required flag-程序员宅基地

文章浏览阅读1.8k次。k8s kube-apiserver 启动报错k8s 版本 1.24根据报错提示说的是是一个必须的参数我们来看一下这个参数是干啥的服务帐号令牌颁发者的标识符。 颁发者将在已办法令牌的 “iss” 声明中检查此标识符。 此值为字符串或 URI。 如果根据 OpenID Discovery 1.0 规范检查此选项不是有效的 URI,则即使特性门控设置为 true, ServiceAccountIssuerDiscovery 功能也将保持禁用状态。 强烈建议该值符合 OpenID 规范: https://_service-account-issuer

【CodeForces - 988C 】Equal Sums (思维,STLmap,STLset,tricks)_草莓^app^【755c.top】最新版-程序员宅基地

文章浏览阅读288次。题干:You are given kk sequences of integers. The length of the ii-th sequence equals to nini.You have to choose exactly two sequences ii and jj (i≠ji≠j) such that you can remove exactly one element ..._草莓^app^【755c.top】最新版

随便推点

Windows下Cygwin环境的Hadoop安装(4)- 在Eclipse中建立hadoop开发环境_hadoop class path 多个文件 cygwin-程序员宅基地

文章浏览阅读6.3k次。在使用hadoop的过程中,不可避免地遇到一些问题需要对hadoop代码进行改进,这就要求我们必须建立一个可修改hadoop代码的开发环境,下面的过程,我们就来建立一个基于Eclipse的hadoop开发环境。- 安装AntHadoop的编译需要Ant的支持,从这里下载并安装最新的Ant:http://ant.apache.org/bindownload.cgi。安装完成后,别忘了将_hadoop class path 多个文件 cygwin

VB:所有控件自适应窗口大小_控件随窗体大小变化改变 vb代码-程序员宅基地

文章浏览阅读1.1w次,点赞5次,收藏18次。Option ExplicitPrivate FormOldWidth As Long'保存窗体的原始宽度Private FormOldHeight As Long'保存窗体的原始高度'在调用ResizeForm前先调用本函数Private Sub ResizeInit(FormNameAs Form)Dim Obj As Control_控件随窗体大小变化改变 vb代码

Python学习笔记——pandas中get_dummies()的用法_python get_dummies-程序员宅基地

文章浏览阅读5.5k次,点赞5次,收藏14次。原文链接在此可以看到get_dummies默认就是所有变量都转了默认转了以后的变量用columns名_数值名表示其中参数predix:prefix : 给输出的列添加前缀,如prefix=“A”,输出的列会显示类似prefix_sep : 设置前缀跟分类的分隔符sepration,默认是下划线"_"df = pd.DataFrame([[‘green’ , ‘A’],[‘red’ , ‘B’],[‘blue’ , ‘A’]])pd.get_dummies(df,prefix = _python get_dummies

【政考网答疑】为什么公务员招录限制35岁以下?-程序员宅基地

文章浏览阅读934次。政考网每日一答,今日咱们讨论的问题是为什么公务员招录限制35岁以下?众所周知,无论是各地省考还是国考,均会要求考生年龄在18周岁以上、35周岁以下(应届硕士和博士经招录机关同意,可放宽到40岁),那么,公务员招录考试为何会限制35岁以下报考呢?这样的要求是否合理?1、高龄人员的可塑性相对不强相比较应届毕业生或者刚毕业不久的大学生,35以上的考生在身体素质上的优势并不明显,特别是一些基层岗位,条件艰苦,高龄考生的岗位匹配度相对较低。古语云,“三十而立,四十而不惑。”高龄考生已从过...

MySQL必知必会学习历程(一)_mysql编写新增教育经历-程序员宅基地

文章浏览阅读2.1k次,点赞5次,收藏27次。MySQL必知必会学习历程第1章 了解SQL1.1 关键术语介绍第2章 MySQL简介2.1 关键术语介绍2.2 安装mysql命令行实用程序(可选)2.3 安装mysql_community(最优)2.3.1 下载mysql_community2.3.2 安装过程第3章 使用MySQL3.1 连接到数据库3.2 建立样例数据库3.2.1 创建空的数据库3.2.2 下载样例表生成脚本3.2.3 使用样例表生成脚本3.3 选择数据库(USE)3.4 了解数据库和表(SHOW)3.5 命令及注释汇总第4章 检索_mysql编写新增教育经历

你都用 Python 来做什么?_你用python做什么-程序员宅基地

文章浏览阅读1.3w次,点赞42次,收藏158次。你们都用python做些什么呢?在开发中 python 这一个语言就像是小叮当,而 python 的第三方库则是“百宝箱”,你只要想着对某一个方向进行开发,那么这个“百宝箱”就会给你想要的东西。由于我是在开发多年后接触到的 python,对我来说自从接触 python 就打开了“新世界”的大门。(我正在求设计做一张图,还没做完,做完贴上在这里)一、做个自己玩游戏的程序在前几年,我有一个朋友是一个“游戏商人”,不过大多数他是手动进行商品处理。他有一天找到我,跟我说“嗨兄弟,会不会做外G?”!此时我_你用python做什么