【Vue】template 模板用法

一颗不甘坠落的流星

已于 2022-07-21 17:02:27 修改

阅读量5.6w

点赞数 33

分类专栏： Vue 全家桶文章标签： vue template

于 2021-03-30 18:38:18 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/115321988

版权

Vue 全家桶专栏收录该内容

32 篇文章 47 订阅

订阅专栏

文章目录

一、在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语法：可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。其他方法不行。
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>

在这里插入图片描述

一颗不甘坠落的流星

关注

33
点赞
踩
134

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Vue】template 模板用法

文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里（官方推荐）一、在HTML5中template标签：其内容隐藏在客户端之外该内容在加载页面是不会呈现，不会渲染出任何信息相当于自带属性：template {display: none;}<body> <template>  内容模板元素 </
复制链接

扫一扫