vue.js中的v-if指令使用template同时判断多个元素

原创于 2018-12-24 21:35:20 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

本文为acoolgiser原创文章，转载请贴上原文链接。（公众号：acoolgiser）

文章标签：

#vue.js #template #v-if控制多个元素

vue.js 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue.js中v-if指令的使用方法，用于控制元素的显示与隐藏。特别讲解了如何利用template标签批量控制多个元素的显示状态，使代码更加整洁高效。

在vue.js中，v-if指令可以控制元素的显示与隐藏，用法：

<div id="app" v-if="status"> 
    我是div
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            status: 1
        }
    })
</script>

当同时要控制多个元素（比如多个div，或其他元素）的显示与否时，可以使用vue.js的内置指令template把这多个元素包含起来，如下：

<div id="app">
    <template v-if="status">
        <p> 我是div </p>
        <p> 我是div </p>
        <p> 我是div </p>
    </template>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            status: 1
        }
    })
</script>

这样使用就可以让三个p标签同时控制了。

当然template标签不会作为渲染的结果。