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