template标签配合vue用法

template标签中的内容默认在页面中是不显示的，一般会使用template标签配合vue来替换另一个标签中的内容

案例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <template id="tem">
        <div id="div1">我是template</div>
        <div>我是template</div>
    </template>
    <script>
        let o = document.getElementById("tem");
        console.log(o.content.nodeName);//#document-fragment
        console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
        console.log(o.content.getElementById("div1").innerHTML);//<div id="div1">我是template</div>
        console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
    </script>
</body>
</html>

效果：

上述案例可以看出template标签中的内容不会展示在页面中，但是可以通过content属性来获取相应的值打印在console中

案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
        <template>
            <div>我是template</div>
            <div>我是template</div>
        </template>
    </div>
    <!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
    <template id="tem">
        <div id="div1">我是template</div>
        <div>我是template</div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>
</body>

</html>

效果：

上述案例可以看出被vue实例绑定的元素内部的template标签中的内容可以展示在页面上，而不被绑定的依旧不显示在页面上

案例3：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>template v-if="true"</h3>
        <template v-if="true">
            <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
            <div>我是template</div>
            <div>我是template</div>
        </template>
        <h3>div v-if="true"</h3>
        <div v-if="true">
            <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
            <div>我是template</div>
            <div>我是template</div>
        </div>
        <h3>template v-for</h3>
        <!--此处会输出6个‘我是template’并且dom结构中不存在template标签-->
        <template v-for="a in 3">
            <div>我是template</div>
            <div>我是template</div>
        </template>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>
</body>

</html>

效果：

上述案例可以看出template标签支持v-if、v-else-if、v-else、v-for这些指令。但是template标签不支持v-show指令，即v-show="false"对template标签来说不起作用

案例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="first">
        <div v-if="flag">{{msg}}</div>
        <div v-else>111</div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data:{
                msg:"你好",
                flag:true
            },
            template:"#first"
        });
    </script>
</body>
</html>

当flag为true是，显示“你好”，否则显示“111”

效果：

上述案例直观的展现出template配合vue的使用