圖文講解vue的v-if使用方法
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ù)的顯示與隱藏
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>
2、引入vue.js。在body結(jié)束標(biāo)簽前面使用引入vue.js文件。
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>
4、添加用于v-if、v-esle判斷的falge數(shù)據(jù)。使用vue提供的data對(duì)flage設(shè)置值為true。
代碼：
data:{
flage:true
}
5、保存html后使用瀏覽器打開(kāi)，即可看到v-if設(shè)置為true是的數(shù)據(jù)。
6、回到html代碼頁(yè)面，把flage修改為false，保存后刷新頁(yè)面，會(huì)看到顯示的內(nèi)容為v-else的。
相關(guān)文章
這篇文章主要介紹了Vue使用axios添加請(qǐng)求頭方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue實(shí)戰(zhàn)之項(xiàng)目開(kāi)發(fā)時(shí)常見(jiàn)的幾個(gè)錯(cuò)誤匯總
vue作為前端主流的3大框架之一,目前在國(guó)內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)戰(zhàn)之項(xiàng)目開(kāi)發(fā)時(shí)常見(jiàn)的幾個(gè)錯(cuò)誤匯總的相關(guān)資料,對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊
最近在做商城類的項(xiàng)目，需要使用到客服系統(tǒng)，用戶選擇的騰訊IM即時(shí)通信，所以本文主要介紹了vue實(shí)現(xiàn)集成騰訊TIM即時(shí)通訊，感興趣的可以了解一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
提起幫助文檔，想必大家都會(huì)想到?VuePress等。但是VuePress是“靜態(tài)網(wǎng)站生成器”，需要我們自行編寫文檔，然后交給VuePress變成網(wǎng)站。因此，本文將用vite2+Vue3編寫一個(gè)在線幫助文檔工具，需要的可以參考一下2022-03-03
vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)
這篇文章主要介紹了vue改變對(duì)象或數(shù)組時(shí)的刷新機(jī)制的方法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
本篇文章主要介紹了VueJS如何引入css或者less文件的一些坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單示例
在Vue中實(shí)現(xiàn)模糊查詢,你可以使用JavaScript的filter和includes方法,結(jié)合Vue的v-for指令,本文給大家舉了一個(gè)簡(jiǎn)單的示例,并通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
前端報(bào)錯(cuò)npm ERR! cb() never called!問(wèn)題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問(wèn)題的解決辦法,需要的朋友可以參考下2024-05-05
Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08