利用vue控制元素的顯示與隱藏
更新時間：2022年12月02日 15:30:23 作者：是江流兒呀
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下
方法：
- 使用 v-if 指令，通過動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素的方式來顯示或隱藏元素；
- 使用 v-show 指令，通過設置DOM元素的display樣式屬性來控制顯隱。
v-if 指令與 v-show 指令都可以根據(jù)值動態(tài)控制DOM元素顯示隱藏，
v-if 和 v-show 屬于Vue的內(nèi)部常用的指令，指令的職責是當表達式的值改變時把某些特殊的行為應用到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為隱藏。
總結(jié)
到此這篇關于利用vue控制元素的顯示與隱藏的文章就介紹到這了,更多相關vue控制元素顯示與隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應用程序,在Vue.js中,我們可以通過動態(tài)地增加和刪除組件來實現(xiàn)動態(tài)頁面的構(gòu)建和更新,本文介紹Vue?刪除和增加自定義組件實戰(zhàn)教程,感興趣的朋友一起看看吧2024-08-08
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實現(xiàn)跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關知識,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue 使用rules對表單字段進行校驗的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了.eslintrc配置目錄及配置項的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue修改props數(shù)據(jù)報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)內(nèi)容可滾動的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09
Vue+Router+Element實現(xiàn)簡易導航欄
這篇文章主要為大家詳細介紹了Vue+Router+Element實現(xiàn)簡易導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了vue3手動封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09