v-show和v-if的区别?

news/2024/7/10 2:29:13 标签: vue

1.共同点:都能控制元素的显示和隐藏。

2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。

v-show 使用:

<div  v-show="show">v-show</div>
// true 显示  false 隐藏
 data () {
        return {
            show:false,
            
        }
    },

v-if 使用:

 <div v-if="show"> v-if </div>
 
 <div v-else> v-else </div>
 data () {
        return {
            show:false,
            
        }
    },


http://www.niftyadmin.cn/n/861709.html

相关文章

对于ES6的理解进阶

一&#xff1a;面向对象&#xff1a;类class 面向对象三大特性之封装 封装是面向对象的重要原则&#xff0c;它在代码中的体现主要是以下两点&#xff1a; 封装整体&#xff1a;把对象的属性和行为封装为一个整体&#xff0c;其中内部成员可以分为静态成员&#xff08;也叫类…

CSS清除浮动的方法以及优缺点

1.父级div定义 height <style type"text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;} .left{float:left;width:20%;height:200px;backg…

npm 包的坎坷“续命”之生

如果说 npm 的大新闻&#xff0c;莫过于之前的 left-pad 撤包事件&#xff0c;event-stream 投毒事件&#xff0c;Ant Design 彩蛋事件。使得很多前端开发者又开始重新思考 npm 生态时候真的存在问题&#xff1f; 今天我们文章的主角是 memwatch&#xff0c;一个用来帮助我们检…

如何进行前端优化

前端优化的目的是什么 ? 1. 从用户角度而言&#xff0c;优化能够让页面加载得更快、对用户的操作响应得更及时&#xff0c;能够给用户提供更为友好的体验。 2. 从服务商角度而言&#xff0c;优化能够减少页面请求数、或者减小请求所占带宽&#xff0c;能够节省可观的资源。 …

浅谈一下防抖和节流

什么是防抖和节流 函数防抖和节流&#xff0c;都是控制事件触发频率的方法。应用场景有很多&#xff0c;输入框持续输入&#xff0c;将输入内容远程校验、多次触发点击事件、onScroll等等。 防抖&#xff08;debounce&#xff09; 所谓防抖&#xff0c;就是指触发事件后在 n…

git常规命令行操作

按照工作流程来的Git操作 1、将远程的代码拉取下来 git clone https://… 此时得到改地址下的文件 2、在该文件下新建文件&#xff0c;然后执行 git add . 将所有文件纳入版本库 3、使用 git status 查看文件状态&#xff0c;没有被加入版本库的文件都会标红&#xff0c;加入了…