欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue?控制元素顯示隱藏的方法和區(qū)別

 更新時間：2022年12月07日 11:10:35   作者：彭式程序猿  
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、控制元素顯示隱藏的方法

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>

// 頁面顯示內(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;
  • 設置元素的樣式 （ 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樹內(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 就好了

到此這篇關(guān)于Vue 控制元素顯示隱藏的方法和區(qū)別的文章就介紹到這了,更多相關(guān)Vue 控制元素顯示隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論