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