脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue v-if未生效问题

vue v-if未生效问题及解决

 更新时间：2024年03月04日 08:44:24   作者：左直拳  
这篇文章主要介绍了vue v-if未生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue v-if未生效问题

事实证明，v-if本身是没有什么问题的，问题出在对应的变量身上。

前不久我使用VUE开发时遇到一个问题，好像v-if不起作用。

什么意思呢，v-if是一个条件表达式，当且仅当条件满足时才触发，但在我的程序中，它好像有时条件明明不满足，也会被触发。

这就很麻烦了。难道是VUE这个破烂不行？

事实上，VUE是没啥问题的，是我不行。

代码如图：

问题其实出在"edit"这个变量里。

如果将edit换成“true/false”，就一点问题没有，运行结果毫不含糊。

但换成变量就不一定了。

原因

我这些代码放在iView的一个模式对话框modal里，而modal的所谓关闭，其实只是隐藏，并没有从内存中去掉。

当再次打开时，edit还是上一次展现时用的值，但我没有意识到，总认为对话框重新出现时，上面的变量一定是新的。

我的思维，还停留在原始的网页开发上。众所周知，http协议是无状态的，网页关闭、打开，所有的信息都是重新初始化过的。

而现在vue等开发平台，默认是单页系统，只有一个页面，所有东西在上面，基本都是动态加载，一旦加载，默认又会缓存下来。

这样做好许多好处，节省资源，速度快，用户体验好。缺点，似乎是开发的复杂度增加了。

补充

v-if 与 v-show 的区别

二者都对应条件，当条件不满足时，v-if不加载，v-show加载但不显示。

在运行过程中，v-if的条件切换，由不满足到满足时，v-if对应组件加载。

但这有个过程。期间组件不一定能访问。

因此，需要将组件访问语句放在this.$nextTick里，以免报错。

<!-- 当edit为真，加载Editor组件，否则加载Report组件 -->
<Report ref="report1" v-if="!edit" />
<Editor ref="editor1" v-if="edit" />

checkOver () { // 校核归来
  this.edit = false
  let _this = this
  this.$nextTick(() => {
    _this.$refs.report1.init(_this.id)
  })
},

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解vue3中如何使用shaka-player

    详解vue3中如何使用shaka-player

    这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue2.x background:url()的踩坑记录

    vue2.x background:url()的踩坑记录

    这篇文章主要介绍了vue2.x background:url()的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue3中的setup()函数基本使用详解

    vue3中的setup()函数基本使用详解

    在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue3封装 Message消息提示实例函数详解

    Vue3封装 Message消息提示实例函数详解

    这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下，希望能够给你带来帮助
    2021-09-09
  • Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别详解

    Vue中 Runtime + Compiler 和 Runtime-o

    这篇文章主要介绍了Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别,结合实例形式详细分析了Vue中 Runtime + Compiler 和 Runtime-only 两种模式基本功能、原理、区别与相关注意事项,需要的朋友可以参考下
    2023-06-06
  • Vue关于自定义事件的$event传参问题

    Vue关于自定义事件的$event传参问题

    这篇文章主要介绍了Vue关于自定义事件的$event传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 面试题：react和vue的区别分析

    面试题：react和vue的区别分析

    这篇文章主要介绍了react和vue的区别分析，在面试中经常会遇到，小编通过实例文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue如何使用文件流进行下载(new Blob)

    vue如何使用文件流进行下载(new Blob)

    这篇文章主要介绍了vue如何使用文件流进行下载(new Blob)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue通过ref获取不到$refs问题

    Vue通过ref获取不到$refs问题

    这篇文章主要介绍了Vue通过ref获取不到$refs问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • Vue检测屏幕变化来改变不同的charts样式实例

    Vue检测屏幕变化来改变不同的charts样式实例

    这篇文章主要介绍了Vue检测屏幕变化来改变不同的charts样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论