圖文講解vue的v-if使用方法

更新時間：2019年02月11日 16:09:31 投稿：laozhang

在本篇文章里我們給大家分享了關于vue的v-if使用方法的相關知識點，有興趣的朋友們跟著學習下。

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

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

代碼：

<div id="app">

<div>當flage為true時顯示</div>

<div>當flage為false時顯示</div>

</div>

2、引入vue.js。在body結束標簽前面使用引入vue.js文件。

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

代碼：

<script>

var app = new Vue({

el:"#app"

})

</script>

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

代碼：

data:{

flage:true

}

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

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

您可能感興趣的文章:

vue
v-if

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