溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue如何控制元素的隱藏與顯示，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
vue控制元素隱藏與顯示的方法：1、利用“v-if”和“v-else”指令來控制顯隱；2、使用“v-show”指令，通過切換元素的CSS display屬性來控制顯隱；3、直接給元素設置display或opacity樣式來控制顯隱。
本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
vue中控制元素的隱藏和顯示的幾種方法
1、v-if v-else 指令
2、v-show
<div v-show="showGroup"> <div class="formTitle">圖層組</div > </div >
比如想要隱藏 上面這個div 那么給這個div加一個 v-show的屬性。名字你隨便起
然后再js代碼中 設置 showGroup的默認值 為false，也就是剛啟動的時候，默認是不顯示的，后面如果想要顯示這個div，那么可以直接設置vm.showGroup=true即可
3、display:none & opacity：0【通過屬性綁定還是 ref獲取到dom元素在設置display:none 或者 設置透明度即可】 && 把元素移到文檔可視區(qū)之外（transform:translate()） 【變相隱藏，顯示，結合動畫實現炫酷效果】
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業(yè)資訊頻道，感謝您對億速云的支持。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
