溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在vue中使用v-if指令

發(fā)布時(shí)間：2021-03-25 16:16:40 來(lái)源：億速云 閱讀：493 作者：Leah 欄目：web開發(fā)

如何在vue中使用v-if指令？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

vue提供了一個(gè)用于判斷的v-if 、v-else語(yǔ)法，可以通過(guò)v-if和v-else進(jìn)行內(nèi)容的顯示與隱藏。下面將通過(guò)使用v-if、v-else進(jìn)行數(shù)據(jù)的顯示與隱藏

如何在vue中使用v-if指令

1、新建一個(gè)html頁(yè)面，然后創(chuàng)建一個(gè)div設(shè)置id為app，然后在這個(gè)div里面創(chuàng)建兩個(gè)div，同時(shí)給這兩個(gè)div設(shè)置不同的文本。

代碼：

<div id="app">

<div>當(dāng)flage為true時(shí)顯示</div>

<div>當(dāng)flage為false時(shí)顯示</div>

</div>

如何在vue中使用v-if指令 

2、引入vue.js。在body結(jié)束標(biāo)簽前面使用引入vue.js文件。

如何在vue中使用v-if指令

3、創(chuàng)建vue掛載點(diǎn)。在vue.js引入文件后面新建一個(gè)<sctipt>標(biāo)簽，然后使用new Vue()創(chuàng)建掛載點(diǎn)。

代碼：

<script>

var app = new Vue({

el:"#app"

})

</script>

如何在vue中使用v-if指令 

4、添加用于v-if、v-esle判斷的falge數(shù)據(jù)。使用vue提供的data對(duì)flage設(shè)置值為true。

代碼：

data:{

flage:true

}

如何在vue中使用v-if指令

5、保存html后使用瀏覽器打開，即可看到v-if設(shè)置為true是的數(shù)據(jù)。

如何在vue中使用v-if指令

6、回到html代碼頁(yè)面，把flage修改為false，保存后刷新頁(yè)面，會(huì)看到顯示的內(nèi)容為v-else的。

如何在vue中使用v-if指令

如何在vue中使用v-if指令

看完上述內(nèi)容，你們掌握如何在vue中使用v-if指令的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手