關於在v-show的使用中遇到的問題—v-show頻繁切換后失效
最近在寫任務的時候遇到了這樣一個問題：
首先，我在 data 中定義有一個 errRanges 數組，這個數組中的數據是來自在頁面創建的時候發請求返回的數據，也就是說，每次返回的數據都可能不同。然后，頁面上有幾個卡片，點擊不同的卡片，再次調用相同的接口，但是傳的參數不同。
接着，在頁面的某一區域，我引用了2個antDesign的組件，一個alert信息警告和一個card卡片，卡片中的description中還用了v-for循環遍歷，alert和card這兩個組件都使用了v-show來切換顯示，具體條件是：當errRanges數組只有一個元素時，顯示alert組件；當errRangs數組有多個元素時，顯示card組件，部分代碼如下：
<div>
<a-alert type="info" v-show="errCodeRanges.length == 1">
<div slot="message" class="message">
<span>
錯誤碼范圍(十進制)：{{
errCodeRanges[0] ? errCodeRanges[0].code_begin : ""
}}-{{ errCodeRanges[0] ? errCodeRanges[0].code_end : "" }}
</span>
<span>
錯誤碼范圍(十六進制)：{{
errCodeRanges[0]
? errCodeRanges[0].code_begin_hex_string
: ""
}}-{{
errCodeRanges[0] ? errCodeRanges[0].code_end_hex_string : ""
}}
</span>
</div>
</a-alert>
<a-card class="errRangepannel" v-show="errCodeRanges.length > 1">
<a-descriptions :column="3">
<a-descriptions-item
v-for="(item, index) in errCodeRanges"
:label="'錯誤碼范圍' + (index + 1)"
:key="item.id"
>
<div class="rangeContent">
<span
>(十進制):<a class="c-theme"
>{{ item.code_begin }}-{{ item.code_end }}</a
></span
>
<span
>(十六進制):<a class="c-theme"
>{{ item.code_begin_hex_string }}-{{
item.code_end_hex_string
}}</a
></span
>
</div>
</a-descriptions-item>
</a-descriptions>
</a-card>
</div>
后面點擊不同卡片的時候，第一次點擊只有一條數據返回的卡片的時候，能夠正常顯示alert，但是，再次點擊返回數據為多條的卡片之后，再點擊之前只有一條數據返回的卡片，alert卻不顯示了
我檢查了一遍接口返回的數據，發現返回的數據是對的，但是alert上面綁定的v-show在第二次條件渲染時失效了。
我當時也不知道是什么原因，就想着把alert組件中的v-show換成v-if試試，結果“瞎貓碰上死耗子”，就成功解決了！雖然解決了，但是還是不知道是為什么，所以我就在百度上搜索了一下，找到了一個道友跟我遇到過一個相似的問題，他最后也是通過把 v-show 改成 v-if 之后就解決了問題。這是他的原文：https://www.jb51.net/article/137111.htm。
他最后猜想v-show方法失效的原因大概是因為：
由於el-table-column會生成多行標簽元素,根據v-show是不支持template語法的,推斷出v-show不能顯示隱藏多個元素
但是具體的原因，該道友表示也不清楚，我查了一些資料，覺得應該從根本上去分析v-show失效的原因。這是官方文檔中對v-show的描述：
不同的是帶有
v-show的元素始終會被渲染並保留在 DOM 中。v-show只是簡單地切換元素的 CSS propertydisplay。注意，
v-show不支持<template>元素，也不支持v-else。
再來看看我的布局，在alert組件里面，還放了一個div作為插槽，相當於是通過v-show控制了多個元素的顯示與隱藏。然而通過上面引用的官方解釋我們可以知道，v-show是不支持這種情況的。於是我把alert組件里的div給注釋了，再次運行，發現仍然不行。我就在想是不是因為alert組件它本身就帶有插槽，所以不行，於是我換成了span標簽來驗證猜想，結果如我所料：
重復之前的操作，當再次點擊m2時，span標簽還在！！！
那么問題又來了，為什么alert組件下面兄弟組件的card的v-show不受影響呢？再來看看card的內部結構：
？？？難道是因為加了v-for ？於是我把 v-for 去掉了，結果還是沒有任何變化，card 的 v-show 絲毫不受影響，怎么切換卡片都還頑強的顯示在網頁上！這我就十分納悶了，為什么呢？難道是位置的原因？或者渲染條件的原因？所以接下來我就開始一個一個地嘗試猜想：
會不會是位置的原因？
我把alert和card組件在布局上換了一個位置，結果。。。沒啥用，猜想錯誤；
會不會是渲染條件的問題？
我又把alert和card上的v-show中的條件互換了一下，結果。。。仍然沒啥用，猜想再次錯誤。
好吧，以上就當我說了一大堆廢話吧，准確的原因我實在猜不出來了哈哈哈哈，還希望大佬們給我指條明路！ \\\>_<\\\
不過解決辦法是沒錯的，把失效的v-show改成v-if就可以了。跟我一樣想要知道原因的小可愛們不要打我哈，寫了一大篇總結了一個寂寞，哈哈哈！
等我繼續鑽研鑽研，找到原因了再繼續補哈~~~~拜~