最近遇到一個很詭異的問題，elementUI的select切換下拉選項，聯動另一個下拉選項的選項資料時，變得很慢，改變選項後半天這個下拉框還不收起改變值，後面研究了一下，發現是change事件要執行完，下拉框才會收起改變值。但是我這個change事件要改變的是另一個下拉框選項資料，這個資料有特別大上千條，這個在渲染的dom的時候很慢，因此影響了第一個下拉框的改變響應。



後來想了一個辦法，讓資料渲染好，只是控制他的顯示隱藏就好了，這個地方要注意不要用v-if v-else,要用v-show
vue中的 v-if 和 v-show 二者都可以動態的控制元素的隱藏和顯示，但是他們控制的原理是不同的

v-if

v-if 控制元素顯示或隱藏是把dom元素整個的渲染或者刪除，如果刪除，也就是頁面中不存在這個dom元素，以此達到隱藏的效果；

所以v-if在每次切換的時候都會重新建立或者銷燬元素，有較高的切換效能消耗；

而且v-if是惰性的，如果在初始渲染時條件為假，那就什麼也不做，直到條件第一次變為真時，需要渲染時才會開始渲染條件塊

v-show

v-show則是無論你的初始條件是什麼，元素都會被渲染，就是dom元素始終是存在的，v-show只是通過控制css中的display屬性來控制他的顯示或隱藏；

它擁有比較高的初始渲染消耗；

使用場景
　　如果元素需要進行比較頻繁的切換的話，推薦使用v-show，

如果很少用到切換，或者元素可能永遠都不會顯示出來的話，就使用v-if

注意：如果已經在css中明確寫出display : none 的話，在v-if中就算設定v-if為true也是不能讓元素顯示的，因為他沒辦法覆蓋或者修改掉css裡面的

display : none屬性，他只是會修改element style為display:""或者display:none
　　最後修改如下：
1.　去掉change事件
2. v-show控制顯示哪個對應的標籤資料，
ps: 如果有多個數組呢？難道我要寫多個這樣的dom? 大家有沒有更好的處理方法？