快捷導(dǎo)航

關(guān)于Vue開發(fā)中v-if和v-show的聯(lián)合使用步驟

更新時(shí)間：2025年09月20日 09:30:28 作者：會(huì)敲代碼的柯基

本文探討了在Vue.js項(xiàng)目中如何有效利用v-if和v-show指令來實(shí)現(xiàn)多步驟表單導(dǎo)航,確保用戶操作數(shù)據(jù)能在前后步驟間保持不變,通過具體案例分析了這兩種指令的特點(diǎn)及結(jié)合使用的最佳實(shí)踐,感興趣的朋友跟隨小編一起看看吧

v-if和v-show的聯(lián)合使用

最近做了一個(gè)需求，里面有個(gè)功能是彈窗里面有步驟一，然后確定，跳到步驟二，然后點(diǎn)擊上一步還可以返回步驟一頁面，并且保留步驟一之前的的操作

然后我的思路就是：里面兩個(gè)子組件，步驟一組件，步驟二組件。然后v-if顯示隱藏。

但實(shí)際寫好之后發(fā)現(xiàn)，步驟二返回上一步的時(shí)候，因?yàn)槭褂玫氖莢-if，所以數(shù)據(jù)全部重置了，沒有保留之前的操作，所以不符合需求

但幸好步驟一里面的東西不多。

方法一（有瑕疵）：

一種解決方法是跳到步驟二的時(shí)候，先保留步驟一的所有數(shù)據(jù)，然后傳給步驟二，然后步驟二點(diǎn)擊上一步的時(shí)候再傳給步驟一，這種也可以，但確定是要是步驟一里面有很多數(shù)據(jù)的話，就很繁瑣，而且容易忘記傳一些數(shù)據(jù)。

我想了想，可以使用v-show，因?yàn)関-show只是css的顯示隱藏，不會(huì)觸發(fā)數(shù)據(jù)重置，可以保留數(shù)據(jù)

但又發(fā)現(xiàn)v-show并不會(huì)觸發(fā)mounted里的計(jì)算，還需要加上v-if，最終是這樣的

方法二：v-if和v-show一起使用

首先，初始step是0，步驟一和步驟二v-if都是false；

然后當(dāng)step為1的時(shí)候，v-if為true，v-show為true，步驟一顯示，且觸發(fā)mounted里面的運(yùn)算，獲取數(shù)據(jù)，重置數(shù)據(jù)；

然后操作之后點(diǎn)擊下一步，step為2，步驟一的v-if為true，v-show為false，步驟一的css隱藏，但是數(shù)據(jù)操作還是保留著，步驟二顯示。

然后點(diǎn)擊上一步，step為1，步驟二隱藏，步驟一的v-if還是true，v-show也是true，因?yàn)関-if一直都是true，所以不會(huì)觸發(fā)mounted里面的運(yùn)算，只是單純的dom的顯示隱藏，數(shù)據(jù)也保留著

對(duì)比兩種方法，還是方法二好一些，簡單實(shí)用

補(bǔ)充：Vue之 v-if 和 v-show 的使用

Vue之 v-if 和 v-show 的使用

v-if 和 v-show 都能控制元素的隱藏和顯示。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則v-if 較好。

v-if 的特點(diǎn)：每次都會(huì)重新刪除或創(chuàng)建元素。

v-show 的特點(diǎn)：每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的display:none 樣式。

下面是一個(gè)使用 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的特點(diǎn)：每次都會(huì)重新刪除或創(chuàng)建元素 -->
    <!-- v-show的特點(diǎn)： 每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的display:none 樣式-->
    <!-- v-if有較高的切換性能消耗 -->
    <!-- v-show有較高的初始渲染消耗 -->
    <!-- 如果元素涉及到頻繁的切換，最好不要使用v-if,推薦使用v-show -->
    <!-- 如果元素可能永遠(yuǎn)也不會(huì)被顯示出來讓用戶看到，則推薦使用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>

到此這篇關(guān)于關(guān)于Vue開發(fā)中v-if和v-show的聯(lián)合使用步驟的文章就介紹到這了,更多相關(guān)vue v-if和v-show使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: