使用Vue?控制元素顯示隱藏的方法和區(qū)別
更新時(shí)間：2022年12月07日 11:10:35 作者：彭式程序猿
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、控制元素顯示隱藏的方法
1. v-if 和 v-else 指令
- 單獨(dú)使用 v-if，滿足條件顯示，反之隱藏
<template>
<div v-if="a > 10">
Demo show
</div>
</template>
<script>
export default {
data() {
return {
a:18
}
}
}
</script>
// 頁面顯示內(nèi)容
Demo show- v-if 和 v-else 一起使用，滿足v-if中的條件就顯示有v-if判斷中的代碼內(nèi)容，反之則顯示 v-else中的內(nèi)容
<template>
<div v-if="a > 20">
block A;
</div>
<div v-else>
block B;
</div>
</template>
<script>
export default {
data() {
return {
a: 18
}
}
}
</script>
// 頁面顯示內(nèi)容
block B;2. 切換元素的CSS display屬性
- 用
v-show指令
<template>
<div v-show="a>10">
block A;
</div>
</template>
<script>
export default {
data() {
return {
a: 18
}
}
}
</script>
// 頁面顯示內(nèi)容
block A;- 設(shè)置元素的樣式 （
display：none）
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
display: none;
}
</style>3. opacity屬性
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
opacity: 0;
}
</style>4. visibility屬性
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
visibility: hidden; //隱藏
visibility: visible; //顯示
}
</style>5. width和height屬性 （不建議使用）
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
width: 0;
height: 0;
overflow: hidden; //必須要有這個(gè)屬性才能隱藏
}
</style>二、區(qū)別
v-if顯示隱藏是將dom元素整個(gè)添加或刪除;v-show隱藏是為該元素添加css–display:none，dom元素依舊還在，但是不占任何的位置;opacity是將元素的透明度設(shè)置為0,visibility: hidden是將元素隱藏，dom元素依舊還在，在網(wǎng)頁中該占的位置還是占著.
三. 注意事項(xiàng)
- 有v-if的地方不一定有v-else，有v-else同級元素中必有v-if;
- v-if和v-else配合使用必須在同一級，不能存在不同級;
// 正確示例
<div>
<div v-if="a > 0">
block A;
</div>
<div v-else> block B; </div>
</div>
// 錯(cuò)誤示例
<div>
<div v-if="a > 0">
block A;
<div v-else> block B; </div>
</div>
</div>- v-if有更高的
切換消耗； - v-show有更高的
初始渲染消耗； - 如果需要
頻繁切換則用v-show，反之則用v-if.
補(bǔ)充知識點(diǎn)：
vue 控制元素的顯示和隱藏
方法：
- 使用 v-if 指令，通過動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素的方式來顯示或隱藏元素；
- 使用 v-show 指令，通過設(shè)置DOM元素的display樣式屬性來控制顯隱。
v-if 指令與 v-show 指令都可以根據(jù)值動態(tài)控制DOM元素顯示隱藏，
v-if 和 v-show 屬于Vue的內(nèi)部常用的指令，指令的職責(zé)是當(dāng)表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到DOM上。
v-if 會直接刪除元素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 ，就是剛啟動的時(shí)候，默認(rèn)是不顯示的，
后面如果想要 顯示 這個(gè) 按鈕 ，就直接設(shè)置 showButton 為 true 就好了
到此這篇關(guān)于Vue 控制元素顯示隱藏的方法和區(qū)別的文章就介紹到這了,更多相關(guān)Vue 控制元素顯示隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)3D柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在vue項(xiàng)目中配置你自己的啟動命令和打包命令方式
這篇文章主要介紹了在vue項(xiàng)目中配置你自己的啟動命令和打包命令方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?項(xiàng)目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項(xiàng)目中使用TSX（TypeScript?JSX）的背景、優(yōu)勢和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇2024-11-11
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作
debounce是lodash工具庫中的一個(gè)非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
本文主要介紹了關(guān)于electron打包的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03