欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

14. Vue v-if 和 v-show 的使用和特点

程序员文章站 2022-07-01 18:09:33
...

基本使用说明

v-if : 当flag为true,则显示,如果flag为false,则隐藏。
v-if 的特点:每次都会重新删除或创建元素

<h3 v-if="flag">这是用v-if控制的元素</h3>

v-show : 当flag为true,则显示,如果flag为false,则隐藏。
v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式

<h3 v-show="flag">这是用v-show控制的元素</h3>

设置flag为false,隐藏 v-if 和 v-show 的效果

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="app">

        <h3 v-if="flag">这是用v-if控制的元素</h3>

        <h3 v-show="flag">这是用v-show控制的元素</h3>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods:{}
        })
    </script>

</body>
</html>

浏览器显示如下:

14. Vue v-if 和 v-show 的使用和特点

总结

  • 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show 。因为v-if 会频繁创建、删除dom元素,非常效果浏览器性能。

  • 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if。因为v-show总是需要创建dom元素的,而 v-if 只有需要显示的时候才会创建。

14. Vue v-if 和 v-show 的使用和特点