圖文講解vue的v-if使用方法
更新時間：2019年02月11日 16:09:31 投稿：laozhang
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識點(diǎ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掛載點(diǎn)。在vue.js引入文件后面新建一個<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對flage設(shè)置值為true。
代碼：
data:{
flage:true
}
5、保存html后使用瀏覽器打開，即可看到v-if設(shè)置為true是的數(shù)據(jù)。
6、回到html代碼頁面，把flage修改為false，保存后刷新頁面，會看到顯示的內(nèi)容為v-else的。
相關(guān)文章
element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼
本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Node.js+WebSocket實(shí)現(xiàn)即時通訊
本文主要介紹了Vue+Node.js+WebSocket實(shí)現(xiàn)即時通訊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue項(xiàng)目打包后打開空白解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue兼容ie9的問題全面解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
基于vue-router的matched實(shí)現(xiàn)面包屑功能
本文主要介紹了基于vue-router的matched實(shí)現(xiàn)面包屑功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09