Vuejs007---v-if 指令的应用

最新推荐文章于 2022-11-01 17:02:31 发布

赵书正

最新推荐文章于 2022-11-01 17:02:31 发布

阅读量190

点赞数 1

分类专栏：前端框架 Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/rngigskt/article/details/119882259

版权

前端框架 Vue.js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一：v-if 指令和 v-show 指令的使用和区别

案例 1 ： v-if 的使用

案例 2 ： v-show 的使用

简单的比较 v-if 指令和 v-show 指令，效果是一模一样的

点击浏览器（ F12 ）中的查看器观察显示页面元素信息

如果 flag 为 true ，观察到的结果是一致的。

如果 flag 为 false，观察到的结果是不同的

其中 v-if 中的元素是本身就没有的， v-show 中的元素是存在的，只是

通过 false 属性值，系统为该元素新增了 display:none ，表示不展现该

元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
        <!--

            v-if:boolean true/flase

            当值为true：则展现标签对中的信息
            当值为false：则不展现标签对中的信息

        -->
        <p v-if="flag">

            显示该文本1

        </p>

        <p v-show="flag">

            显示该文本2

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
               flag : false

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
</html>

通过观察得到结论：

v-if 为 true ：创建条件元素为 false ：去除该元素

v-show 为 true ：展现条件元素为 false ：隐藏该元素

在实际项目开发中，一般的需求情况下，我们使用 v-if 就可以了。

但是如果对于元素的展现与否需要频繁的切换，我们需要使用 v-show

的形式展现或者隐藏元素，因为 v-if 在每次切换为 true 的时候都需要

重新的创建元素，降低页面展现元素的效率。

赵书正

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vuejs007---v-if 指令的应用

一：v-if 指令和 v-show 指令的使用和区别案例 1：v-if 的使用案例 2：v-show 的使用简单的比较 v-if 指令和 v-show 指令，效果是一模一样的点击浏览器（F12）中的查看器观察显示页面元素信息如果 flag 为 true，观察到的结果是一致的。如果 flag 为 false，观察到的结果是不同的其中 v-if 中的元素是本身就没有的，v-show 中的元素是存在的，只是通过 false 属性值，系统为该元素新增了 di..
复制链接

扫一扫

专栏目录