template标签

最新推荐文章于 2024-05-16 08:09:13 发布

陌一一

最新推荐文章于 2024-05-16 08:09:13 发布

阅读量785

点赞数 1

分类专栏： web前端开发文章标签： javascript vue.js 前端前端框架

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127952679

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

template：

一个包装元素标签，可以给很多标签增加同一种属性用，但是它不会真正的创建在页面上，也不会破坏dom结构，所以很好用；

案例演示：

需求：想让三个标签同时创建，或者同时删除；

改进前的方法：

<body>
    <div id="box">
        <div v-if="isCreated">11111</div>
        <div v-if="isCreated">22222</div>
        <div v-if="isCreated">33333</div>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isCreated:true
            }
        })
    </script>
</body>

给三个div标签都加上“v-if="isCreated"，当isCreated=true时，三个标签都创建出来，当isCreated=false时，三个标签都删除；

但是按照上面的做法，v-if要写三遍，会很冗余，所以就可以用template来解决：
将template标签套在三个div盒子外面，给这个template标签加上v-if属性，这样就可以控制三个标签的创建和删除：
template方法：

<body>
    <div id="box">
        <template v-if="isCreated">
            <div>11111</div>
            <div>22222</div>
            <div>33333</div>
        </template>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isCreated:true
            }
        })
    </script>
</body>

结果：