关于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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！