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