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

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

 更新時(shí)間：2022年12月02日 15:30:23   作者：是江流兒呀  
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下

 方法：

  • 使用 v-if 指令，通過(guò)動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素的方式來(lái)顯示或隱藏元素；
  • 使用 v-show 指令，通過(guò)設(shè)置DOM元素的display樣式屬性來(lái)控制顯隱。

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 只是隱藏，只是簡(jiǎn)單地切換元素的 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通過(guò)了某種條件，你就可以控制operation1和operation2的狀態(tài)了。true為顯示，false為隱藏。

總結(jié)

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

相關(guān)文章

最新評(píng)論