v-show 与 v-if

发表于2025-09-13|更新于2025-12-11|vue框架

|总字数:377|阅读时长:1分钟|浏览量:

v-show 与 v-if

1. v-show 与 v-if 的共同点

二者都是 Vue 中用于控制 DOM 元素显示 / 隐藏的指令，都可以根据表达式的布尔值决定元素是否展示。

2. v-show 与 v-if 的区别

维度	v-show	v-if
渲染方式	始终渲染 DOM，通过`display: none`控制隐藏	条件为`false`时，不渲染 DOM 到页面
切换开销	切换时仅修改 CSS，开销小	切换时会销毁 / 重建 DOM，开销大
初始渲染开销	初始渲染需渲染 DOM，开销略大	条件为`false`时不渲染，初始开销小
支持场景	不能用于`<template>`标签	可以用于`<template>`标签（分组渲染）

3. v-show 与 v-if 的原理分析

v-show：编译后会给元素添加内联样式display: [条件? 'block' : 'none']，DOM 元素始终存在于文档流中。
v-if：编译时会根据条件生成条件渲染的代码块，条件为false时，对应的 DOM 节点不会被创建（或会被从 DOM 树中移除）。

4. v-show 与 v-if 的使用场景

v-show：适用于切换频繁的元素（如标签页内容、弹窗开关），利用低切换开销提升性能。
v-if：适用于切换频率低、或初始条件为 false 且不需要渲染 DOM的场景（如权限控制的内容、页面初始化时不需要显示的模块），避免不必要的 DOM 渲染。

文章作者: BoardYoungC

文章链接: http://example.com/2025/09/13/vue/v-show%20%E4%B8%8E%20v-if/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

ES6中 Promise在以往我们如果处理多层异步操作，我们往往会像下⾯那样编写我们的代码 12345671 doSomething(function(result) {2 doSomethingElse(result, function(newResult) {3 doThirdThing(newResult, function(finalResult) {4 console.log('得到最终结果: ' + finalResult);5 }, failureCallback);6 }, failureCallback);7 }, failureCallback); promise 对象仅有三种状态 pending （进⾏中） fulfilled （已成功） rejected （已失败）对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪⼀种状态⼀旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected...

ES6中数组新增扩展

ES6中数组新增了扩展扩展运算符的应⽤ES6通过扩展元素符 … ，好⽐ rest 参数的逆运算，将⼀个数组转为⽤逗号分隔的参数序列 1234561 console.log(...[1, 2, 3])2 // 1 2 33 console.log(1, ...[2, 3, 4], 5)4 // 1 2 3 4 55 [...document.querySelectorAll('div')]6 // [<div>, <div>, <div>] 主要⽤于函数调⽤的时候，将⼀个数组变为参数序列 123456781 function push(array, ...items) {2 array.push(...items);3 }4 function add(x, y) {5 return x + y;6 }7 const numbers = [4, 38];8 add(...numbers) // 42 ES6 允许为函数的参数设置默认值 1234561 function log(x,...

Node 中的 Stream

Node 中的 Stream流（Stream），是⼀个数据传输⼿段，是端到端信息交换的⼀种⽅式，⽽且是有顺序的,是逐块读取数据、处理内容，⽤于顺序读取输⼊或写⼊输出 Node.js 中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）它的独特之处在于，它不像传统的程序那样⼀次将⼀个⽂件读⼊内存，⽽是逐块读取数据、处理其内容，⽽不是将其全部保存在内存中流可以分成三部分： source 、 dest 、 pipe 在 source 和 dest 之间有⼀个连接的管道 pipe ,它的基本语法是 source.pipe(dest) ， source 和 dest 就是通过pipe连接，让数据从 source 流向了 dest 在 NodeJS ，⼏乎所有的地⽅都使⽤到了流的概念，分成四个种类： • 可写流：可写⼊数据的流。例如 fs.createWriteStream() 可以使⽤流将数据写⼊⽂件 • 可读流：可读取数据的流。例如fs.createReadStream() 可以从⽂件读取内容 • 双⼯流：既可读⼜可写的流。例如 net.Socket •...

Node 中的 Buffer

Node 中的 Buffer在 Node 应⽤中，需要处理⽹络协议、操作数据库、处理图⽚、接收上传⽂件等，在⽹络流和⽂件的操作中，要处理⼤量⼆进制数据，⽽ Buffer 就是在内存中开辟⼀⽚区域（初次初始化为8KB），⽤来存放⼆进制数据在上述操作中都会存在数据流动，每个数据流动的过程中，都会有⼀个最⼩或最⼤数据量如果数据到达的速度⽐进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度⽐进程消耗的数据慢，那么早先到达的数据需要等待⼀定量的数据到达之后才能被处理这⾥的等待区就指的缓冲区（Buffer），它是计算机中的⼀个⼩物理单位，通常位于计算机的 RAM 中简单来讲， Nodejs 不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在 Buffer 中，即在 RAM 中，直⾄将它们发送完毕 Buffer 类在全局作⽤域中，⽆须 require 导⼊创建 Buffer 的⽅法有很多种，我们讲讲下⾯的两种常⻅的形式： • Buffer.from() •...

Vue 常用修饰符

Vue 常用修饰符一、事件修饰符修饰符是什么功能应用场景 .stop 阻止事件冒泡的修饰符阻止当前事件向父元素冒泡子元素点击事件不影响父元素 .prevent 阻止默认行为的修饰符阻止标签的默认行为（如 a 标签跳转、表单提交）自定义表单提交逻辑 .once 事件仅触发一次的修饰符事件绑定后仅执行一次，之后自动解绑按钮点击后仅响应一次（如提交） .self 仅自身触发的修饰符仅当事件触发在当前元素本身时才执行避免父元素冒泡事件触发自身 .capture 事件捕获阶段触发的修饰符事件在捕获阶段（而非冒泡阶段）执行需要优先处理父元素事件的场景二、按键修饰符修饰符是什么功能应用场景 .enter 监听回车键的修饰符仅当按下回车键时触发事件输入框按回车提交内容 .tab 监听 Tab 键的修饰符仅当按下 Tab 键时触发事件表单输入框切换焦点 .delete 监听删除 / 退格键的修饰符仅当按下删除 / 退格键时触发事件输入框内容删除时的逻辑处理 .esc 监听...

axios1. axios 是什么axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。 2. 为什么要封装在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括：统一配置：集中管理请求基地址、超时时间等公共配置；统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）；简化调用：封装通用的请求方法（如get/post），减少重复代码；统一规范：约束接口请求的参数格式、响应处理逻辑。 3. 如何封装（Vue2 中）以下是 Vue2 中 axios 的典型封装步骤：（1）创建 axios 实例并配置公共参数12345678// src/utils/request.jsimport axios from 'axios';// 创建axios实例const service = axios.create({ ...

数据加载中