Vue中v-if的妙用，v-show无法替代

于 2023-03-19 20:56:15 发布
阅读量145 收藏
点赞数 1
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59594179/article/details/129656263
版权

 

 el-table-column(prop="lastEnterAt" label="上一次进入的时间")
    template(#default="scope")
      span(v-if="scope.row.lastEnterAt") {{parseTime(scope.row.lastEnterAt, '{m}/{d} {h}:{i}:{s}')}}

在上面这个table column中，parseTime是我一个工具类的格式化时间的方法。

但如果scope.row.lastEnterAt值为空，没有时间戳传入的话则会报错。

这里使用了v-if就可以不触发parseTime方法，规避这个报错。但如果使用v-show则仍然报错

 

 

Ayachi0721
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 条件渲染 v-if 与 v-show
郊眠寺
06-18 487
在 Vue 中，有两种方法可以有条件地渲染应用程序的某些部分： 和 。条件渲染是控制是否渲染模板代码的能力。我们可以使用应用程序的当前状态来实现这一点。让我们看一个例子。假设我们正在创建一个表单，如果密码长度小于6个字符，我们希望显示一条无效的输入错误消息。 在本例中，我们使用 指令，然后传入一个布尔语句，如果语句为 ，渲染元素。如果为 ，则不会渲染。回到例子，我们将 替换为 ： 可以看到，它们有同样效果，但它们的工作方式是不同的。关键区别在于 有条件地渲染元素，而 有条件地显示元素。这意味着 在
vue中得v-if和v-show
weixin_30544657的博客
09-30 74
1.两者的区别　　v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 ...
v-if和v-show的使用
hyupeng1006的博客
12-14 645
切换筛选条件的显示与隐藏使用v-show代替v-if，因为v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
Vue v-if与v-show的区别
qq_42943107的博客
06-11 265
我们使用v-if实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if，v-show，v-for 指令</title> <script src="vue.js"></script&gt...
v-if 和 v-show 的应用(切换)场景，及其区别
weixin_44719554的博客
09-27 783
v-if 指令是“真正”的条件渲染，因为它会确保在切换过程中条 件块内的事件监听器和子组件适当地被销毁和重建。 相比之下，v-show指令就简单得多，不管初始条件是什么，元 素总是会被渲染，并且只是简单地基于CSS进行切换。 3.一般来说，v-if指令有更高的切换开销，而v-show指令有更高 的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 指令较好;如果在运行时条件很少改变，则使用v-if指令较好。 以下为各自的小例子 ，共各位博友参考* v-if <!DOCTYPE html.
vue-todo-list:用CodeSandbox创建
03-08
在"vue-todo-list:用CodeSandbox创建"的项目中，我们将探讨如何使用Vue.js来构建一个简单的Todo List应用程序，并利用CodeSandbox这个在线开发环境进行实践。 1. **Vue.js基础知识** - **Vue实例**：Vue应用始于...
Adaptive-header-vue
04-02
- **Vue的条件渲染和动态组件**：Vue提供了`v-if`、`v-show`指令以及动态组件来根据条件展示或切换头部内容。 - **Flexbox 或 Grid布局**：现代前端布局技术，如Flexbox或Grid，可以帮助轻松实现响应式布局，使头部...
一个CLI工具用于帮助Vue1x迁移至20
08-10
- `v-enter`、`v-leave`等过渡类名已被新的过渡系统替换，如`v-if`和`v-show`使用`transition`或`transition-group`组件来包裹。 7. **异步组件（Async Components）**：Vue 2.0支持按需加载组件，提高应用性能。 ...
Vue2简单的Alert组件SweetAlert启发
08-10
在Vue2中，我们可以创建一个类似的组件，使其与Vue的组件系统无缝集成，以便在应用中更方便地使用。 首先，我们来理解Vue组件的基本概念。Vue组件是可复用的Vue实例，它们可以像HTML元素一样嵌套和组合，有助于构建...
vue better scroll 无法滚动的解决方法
08-27
本文介绍了 Vue Better Scroll 无法滚动的解决方法，包括使用 `v-show` 替代 `v-if`、检查 HTML 和 CSS 是否写错地方、Better Scroll 初始化时机太早和 Better Scroll 只作用于第一层元素等问题。希望本文能够对大家...
Vue的v-if以及v-show的使用过程中遇到的问题
空白的博客
07-17 3906
当使用vue的v-if或者v-show的时候，如果数据动态变换，数据在data中的话直接给v-if或v-show赋值是没有效果的，需要将赋值的数据放在mounted中进行监听。
从4个方面优化你的Vue项目
weixin_33918114的博客
01-28 577
首发于GitHib：github.com/SimonZhangI… 运行时优化 1、使用v-if代替v-show 两者的区别是：v-if不渲染DOM，v-show会预渲染DOM 除以下情况使用v-show，其他情况尽量使用v-if 有预渲染需求 需要频繁切换显示状态 2、v-for必须加上key，并避免同时使用v-if 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中...
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9151
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
vue addeventlistener_解析Vue项目的四个方面优化
weixin_39958138的博客
11-21 505
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。运行时优化1、使用v-if代替v-show两者的区别是：v-if不渲染DOM，v-show会预渲染DOM 除以下情况使用v-show，其他情况尽量使用v-if 有预渲染需求 需要频繁切换显示状态2、v-for必须加上key，并避免同时使...
vue 日期判断_vue中怎么根据时间戳判断对应的时间
weixin_31185473的博客
02-22 2140
vue中怎么根据时间戳判断对应的时间发布时间：2021-02-14 17:30:13来源：亿速云阅读：87作者：小新这篇文章给大家分享的是有关vue中怎么根据时间戳判断对应的时间的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。根据时间戳 来显示对应的时间段本文是根据vue缩写，但是原理都是想通的根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果...
Vue表格中v-if结合slot-scope=“scope”，以及row的用法
weixin_45609659的博客
08-02 4892
Vue表格中v-if结合slot-scope=“scope”，以及row的用法。
VUE使用 :v-if 或 :v-show 无效
qq_51574759的博客
07-28 1647
和v-on事件绑定的缩写是@一样，只是v-bind的缩写，而v-if和v-show本身就是VUE的指令体系中的指令，他本身就是响应式的。所以呢，不用再加冒号啦，直接写JS变量或者表达式就可以！可能会想，这怎么不对？可以引入响应式呀，可是，我们真的没有理解错的意思嘛？可能不熟悉，或者一段时间没有写的朋友使用这两个指令的时候，会写出这种代码。...
使用Vue时遇到的有关v-if和v-show的问题
qq_42737912的博客
03-24 476
参考博客：https://blog.csdn.net/weixin_42614080/article/details/97950234 遇到的问题：在项目中动态渲染页面时，使用v-show控制列的显示。但是无论v-show中的条件为真或为假，v-show所在的列都无法隐藏。无论是使用@change方法或是其他方式都无法解决该列消失问题。 解决方案：将v-show改为v-if就可以了，查阅了资料才发现问题。 v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display
Vue--v-show和v-if
是吃货不是贝爷的博客
05-23 326
条件渲染目录v-show和v-if v-show和v-if v-show与v-if的区别就是，v-show如果值为false的时候只是添加了一个样式display：none，而v-if直接标签都没有，相比来说show的话一般应用在需要频繁切换的场合，if一般在一次性场合使用（实际开发过程中，v-if用的比较多），这是因为，v-show只是修改了display，而v-if是不断的在dom里面增加以及删除节点。当然不管是哪个，都可以修改为true或者false来决定是显示还是隐藏。 <div id="
vue3-seamless-scroll v-show后动画失效
最新发布
09-15
1. 使用 `v-if` 替代 `v-show`：`v-show` 是通过修改元素的 `display` 属性来控制元素显示与隐藏，而不会从 DOM 中移除该元素。这可能会导致某些动画库无法正常工作。相比之下，`v-if` 会真正地插入或移除元素，因此...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值