关于Vue开发中v-if和v-show的联合使用步骤
v-if和v-show的联合使用
最近做了一个需求，里面有个功能是弹窗里面有步骤一，然后确定，跳到步骤二，然后点击上一步还可以返回步骤一页面，并且保留步骤一之前的的操作
然后我的思路就是：里面两个子组件，步骤一组件，步骤二组件。然后v-if显示隐藏。
但实际写好之后发现，步骤二返回上一步的时候，因为使用的是v-if，所以数据全部重置了，没有保留之前的操作，所以不符合需求
但幸好步骤一里面的东西不多。
方法一（有瑕疵）：
一种解决方法是跳到步骤二的时候，先保留步骤一的所有数据，然后传给步骤二，然后步骤二点击上一步的时候再传给步骤一，这种也可以，但确定是要是步骤一里面有很多数据的话，就很繁琐，而且容易忘记传一些数据。
我想了想，可以使用v-show，因为v-show只是css的显示隐藏，不会触发数据重置，可以保留数据
但又发现v-show并不会触发mounted里的计算，还需要加上v-if，最终是这样的
方法二：v-if和v-show一起使用
首先，初始step是0，步骤一和步骤二v-if都是false；
然后当step为1的时候，v-if为true，v-show为true，步骤一显示，且触发mounted里面的运算，获取数据，重置数据；
然后操作之后点击下一步，step为2，步骤一的v-if为true，v-show为false，步骤一的css隐藏，但是数据操作还是保留着，步骤二显示。
然后点击上一步，step为1，步骤二隐藏，步骤一的v-if还是true，v-show也是true，因为v-if一直都是true，所以不会触发mounted里面的运算，只是单纯的dom的显示隐藏，数据也保留着
对比两种方法，还是方法二好一些，简单实用
补充：Vue之 v-if 和 v-show 的使用
Vue之 v-if 和 v-show 的使用
v-if 和 v-show 都能控制元素的隐藏和显示。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 则v-if 较好。
v-if 的特点：每次都会重新删除或创建元素。
v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式。
下面是一个使用 v-if 和 v-show 的例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<input type="button" @click="flag=!flag" value="toggle"/>
<!-- v-if的特点：每次都会重新删除或创建元素 -->
<!-- v-show的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式-->
<!-- v-if有较高的切换性能消耗 -->
<!-- v-show有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用v-if,推荐使用v-show -->
<!-- 如果元素可能永远也不会被显示出来让用户看到，则推荐使用v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
}
});
</script>
</html>到此这篇关于关于Vue开发中v-if和v-show的联合使用步骤的文章就介绍到这了,更多相关vue v-if和v-show使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
使用生成条形码并打印和vue-print-nb以及报错问题的解决
在TypeScript项目中,正确安装vue3-print-nb并配置env.d.ts声明模块,添加tsconfig.json的include路径,确保全局挂载以实现条形码和批量打印功能2025-07-07
vue中created、watch和computed的执行顺序详解
由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下2022-11-11
Vue 报错Error: No PostCSS Config foun
这篇文章主要介绍了Vue 报错Error: No PostCSS Config found问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js侧滑菜单组件的实现代码大家通过本文一起学习吧2017-12-12
Vue和React都是流行的前端框架,它们有很多相似之处,如组件化和使用虚拟DOM,但是,它们在设计理念、组件存在形式、diff优化和中文文档方面存在一些不同,这篇文章给大家介绍面试官常问Vue和React区别,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了使用vue如何构建一个自动建站项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本文通过示例代码介绍了vxe-table新版本中实现回车自动换行功能的方法,通过设置keyboard-config.isLastEnterAppendRow参数可以控制是否开启该功能,当回车键在最后一行按下时,会自动新增一行,并将光标移动到新行,代码简单易懂,感兴趣的朋友跟随小编一起看看吧2024-12-12
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
这篇文章主要介绍了Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
elementui之el-table如何通过v-if控制按钮显示与隐藏
这篇文章主要介绍了elementui之el-table如何通过v-if控制按钮显示与隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论