Vue入門指南 分支結構

2021-10-02 08:33:03 字數 1252 閱讀 6095

v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染。

>

<

!-- 判斷是否載入,如果為真,就載入,否則不載入--

>

"flag"

>

如果flag為true則顯示,

false不顯示!

<

/span>

<

/div>

var vm =

newvue(}

)<

/script>

v-if的使用場景

"type === 'a'"

>

a<

/div>

<

!-- v-

else

-if緊跟在v-

if或v-

else

-if之後 表示v-

if條件不成立時執行--

>

else-if

="type === 'b'"

>

b<

/div>

else-if

="type === 'c'"

>

c<

/div>

<

!-- v-

else緊跟在v-

if或v-

else

-if之後--

>

else

>

not a/b

/c<

/div>

newvue(}

)<

/script>

另乙個用於根據條件展示元素的選項是 v-show 指令。用法大致與v-if一樣。

'flag'

>測試v-show<

/div>

不同的是帶有 v-show 的元素始終會被渲染並保留在 dom 中。v-show 只是簡單地切換元素的 css 屬性 display。

注意:v-show 不支援元素,也不支援 v-else。

v-if是動態的向dom樹內新增或者刪除dom元素

如果您也正在學習前端的路上,記得關注該博主,學習更多關於前端的知識~

博主主頁 poetic code

Vue 學習入門指南

如果你是一名 vue 開發新手,可能已經聽過很多行話術語,比如單頁面應用程式 非同步元件 伺服器端渲染等等,或者還聽說過與 vue 有關的一些工具和庫,比如 vuex webpack vue cli 和 nuxt。那麼究竟什麼是vue,有什麼作用?每週分享技術文章 優質軟體資源 vue.js是一套用...

分支結構 單分支結構

選擇結構 程式 於生活 程式根據判斷條件的布林值選擇性的執行部分 不同條件下實現不同的操作處理 單分支結構 語法結構 if 條件表示式 冒號不要忘了 條件執行體 條件表示式就是條件判斷,也就是有條件運算子的語句 注意python中是使用縮排表示層次結構,這點與c中是完全不一樣的 筆者除錯過後其中if...

分支結構 多分支結構

多分支結構 一般針對的是乙個連續區間段的不停的處理操作 語法結構 if 條件表示式1 條件執行體1 elif 條件表示式2 條件執行體2 elif 條件表示式n 條件執行體n else 條件執行體n 1 注意這邊的選擇與c中一樣至多只會執行其中的乙個語句執行體 python中允許多分支語句沒有els...