关于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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了mpvue性能优化实战技巧(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
nextTick 是 Vue 提供的一个重要工具,它的作用主要体现在帮助我们更好地处理异步操作,下面就跟随小编一起来探索一下nextTick的原理与实现吧2024-02-02
最近在学习Vue的时候,正好学到了引入echarts图表做数据统计的内容,所以下面这篇文章主要给大家介绍了关于Vue使用Echarts图表多次初始化报错问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue实现页面滚动到底部刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
Vue的组件化给前端开发带来极大的便利,下面这篇文章主要给大家介绍了关于Vue子父组件之间传值的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
对于插槽的概念和使用,这是vue的一个难点,这需要我们静下心来,慢慢研究,下面这篇文章主要给大家介绍了关于vue默认插槽的相关资料,需要的朋友可以参考下2021-11-11
Vue 3 中的 nextTick 主要通过 Promise 实现异步调度,返回一个 Promise 对象,这篇文章主要介绍了vue中nextTick函数和react类似实现代码,需要的朋友可以参考下2024-04-04
下面小编就为大家分享一篇vuex实现登录状态的存储,未登录状态不允许浏览的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3 使用axios拦截器打印前端日志，这是一种比较值得推荐的方式，也就是写一次，就不用总写console.log了。下面来看看文章的详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论