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