利用vue控制元素的顯示與隱藏
更新時間：2022年12月02日 15:30:23 作者：是江流兒呀
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下
方法：
- 使用 v-if 指令，通過動態(tài)的向DOM樹內添加或者刪除DOM元素的方式來顯示或隱藏元素；
- 使用 v-show 指令，通過設置DOM元素的display樣式屬性來控制顯隱。
v-if 指令與 v-show 指令都可以根據值動態(tài)控制DOM元素顯示隱藏，
v-if 和 v-show 屬于Vue的內部常用的指令，指令的職責是當表達式的值改變時把某些特殊的行為應用到DOM上。
- v-if 會直接刪除元素
- v-show 只是隱藏，只是簡單地切換元素的 CSS 屬性display。
v-show 示例：
比如想要 隱藏 下面這個 按鈕 那么給這個 div 加一個 v-show 的屬性，名字我寫的showButton，
<div v-show="showButton">
<Button>按鈕</Button>
</div>然后在 js 代碼中 設置 showButton 的默認值為 false ，就是剛啟動的時候，默認是不顯示的，
后面如果想要 顯示 這個 按鈕 ，就直接設置 showButton 為 true 就好了
補充：vue 控制某個元素的顯示或者隱藏之v-if屬性
在此我定義兩個屬性 v-if=" "
<div title="這是操作一" v-if="operation1"></div> <div title="這是操作二" v-if="operation2"></div>
js 代碼：
new Vue({
el: '#app',
data: {
operation1:false,
operation2:false
}
methods: {
changeStatus(){
if("你設置的條件"){
operation1 = true;
operation2 = true;
}
}
}
})解釋：
默認 operation1和operation2的狀態(tài)是false, 所以是隱藏
當你在changeStatus通過了某種條件，你就可以控制operation1和operation2的狀態(tài)了。true為顯示，false為隱藏。
總結
到此這篇關于利用vue控制元素的顯示與隱藏的文章就介紹到這了,更多相關vue控制元素顯示與隱藏內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在本篇文章里小編給大家整理的是關于vue把輸入框的內容添加到頁面的實例以及相關知識點，需要的朋友們學習下。2019-11-11
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue3+ts重復參數提取成方法多處調用以及字段無值時不傳字段給后端問題
在進行API開發(fā)時,優(yōu)化參數傳遞是一個重要的考量,傳統(tǒng)方法中,即使參數值為空,也會被包含在請求中發(fā)送給后端,這可能會導致不必要的數據處理,而優(yōu)化后的方法則只會傳遞那些實際有值的字段,從而提高數據傳輸的有效性和后端處理的效率2024-10-10
這篇文章主要介紹了vue項目如何引入公共頭部底部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3.2+ts實現(xiàn)在方法中可調用的擬態(tài)框彈窗(類el-MessageBox)
這篇文章主要介紹了vue3.2+ts實現(xiàn)在方法中可調用的擬態(tài)框彈窗（類el-MessageBox）,這個需求最主要的是要通過方法去調用，為了像el-messagebox使用那樣方便，需要的朋友可以參考下2022-12-12
該文章主要介紹了如何在Vue項目中解決IE瀏覽器的兼容性問題,包括解決IE不兼容axios的Promise對象、ES6語法以及polyfill的使用方法,通過配置babel-polyfill、es6-promise和轉ES5語法,解決了在IE瀏覽器中常見的兼容性問題,需要的朋友可以參考下2025-01-01
Vue事件處理是每個Vue項目的必要方面。 它用于捕獲用戶輸入，共享數據以及許多其他創(chuàng)造性方式。在本文中，會介紹基礎知識，并提供一些用于處理事件的代碼示例。需要的小伙伴可以參考下面文章的具體內容2021-09-09
在nuxt使用vueX代替storage的實現(xiàn)方案
這篇文章主要介紹了在nuxt使用vueX代替storage的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue backtop組件的實現(xiàn)完整代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07