vue学习笔记-V-Show 和 V-If的区别

最新推荐文章于 2024-07-19 10:16:01 发布

VickQ

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量245

点赞数

分类专栏： web前端-vue 文章标签： vue.js web前端

本文链接：https://blog.csdn.net/qq_43069222/article/details/103352668

版权

web前端-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

`v-show`

根据表达式的值的真假条件渲染元素，改变css中的display属性，注意是改变css中的属性

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
   <style>
   		 div {
   	        width: 100px;
   	        height: 100px;
   	        background: red
 		   }
   </style>
</head>

<body>

   <div id="app">
        <!-- v-show -->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <div v-show="isShow"></div>
        
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     isShow:true
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述
如图，当表达式中的值为false时，仅仅改变的是css属性display

`v-if`

根据表达式的值的真假条件渲染元素，动态地从DOM树内添加或者移除DOM元素

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>vue指令</title>
</head>

<body>

   <div id="app">
        <!-- v-if -->
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <div v-if="isShow"></div>
       
       <!--引入vue.js文件  -->
       <script src="./vue.js"></script>
       <script>
           //创建一个vue实例
           var app = new new Vue({
               el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
                 //将需要的数据填入data属性中(data是一个对象)
               data: {
                     scope:90
               },
               //将事件处理函数写在methods属性中（methods是一个对象）
               //需要和事件处理函数名称一致，可以是带参也可以不带参
               methods: {
                 
               },
           })
       </script>
</body>
</html>

页面显示结果如下:
在这里插入图片描述
如图，可以看到该节点已从dom树中移除

`v-show 和 v-if的区别`

v-show将标签的display设置为none，控制隐藏
- v-show只会编译一次，后面只需要控制css就能实现显示隐藏
v-if是动态的向DOM树内添加或者移除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

v-if需要不断地创建移除，故在对节点需要频繁的显示隐藏时，使用v-show会更好一点。

VickQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-V-Show 和 V-If的区别

v-show根据表达式的值的真假条件渲染元素，改变css中的display属性，注意是改变css中的属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue指令</title> <style> ...
复制链接

扫一扫

专栏目录