怎么利用vue控制元素的顯示與隱藏

這篇文章主要介紹了怎么利用vue控制元素的顯示與隱藏的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么利用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)部常用的指令，指令的職責是當表達式的值改變時把某些特殊的行為應(yīng)用到DOM上。

• v-if 會直接刪除元素

• v-show 只是隱藏，只是簡單地切換元素的 CSS 屬性display。

v-show 示例： 

比如想要 隱藏 下面這個 按鈕 那么給這個 div 加一個 v-show 的屬性，名字我寫的showButton， 

<div v-show="showButton">
      <Button>按鈕</Button>
</div>

然后在 js 代碼中 設(shè)置 showButton 的默認值為 false ，就是剛啟動的時候，默認是不顯示的，

后面如果想要 顯示 這個 按鈕 ，就直接設(shè)置 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("你設(shè)置的條件"){
                  operation1 = true;
                  operation2 = true;  
              }
           }
        }
     })

解釋：

默認 operation1和operation2的狀態(tài)是false, 所以是隱藏

當你在changeStatus通過了某種條件，你就可以控制operation1和operation2的狀態(tài)了。true為顯示，false為隱藏。

關(guān)于“怎么利用vue控制元素的顯示與隱藏”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么利用vue控制元素的顯示與隱藏”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。