本篇文章我们通过Vue的标签来控制指定元素的因此与显示,直接来看相关的实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-if="isShow">
            Hello 公众号:"程序新视界"!
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>

</body>
</html>

通过代码我们可以看到div元素上使用了vue的v-if标签,该标签表示,当isShow的值为true时才显示该div元素,否则则不显示。

上述代码,默认情况下是会显示内容:Hello 公众号:”程序新视界”!

此时,我们可以通过控制台将isShow属性值改为false,看看效果:

Vue控制元素的显示和隐藏插图

当我们执行完app.isShow=false之后,页面上的div内容随之消失。

这个例子演示了不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。



Vue控制元素的显示和隐藏插图(1)

关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.choupangxia.com/2020/04/19/vue-v-if/