Vue if else條件渲染

2022-06-29 21:51:14 字數 1444 閱讀 8714

判斷vue.js的變數的值,然後執行頁面渲染邏輯(if-elseif-else)

>請先點選查詢成績

h3>

<

h4 v-else-if

="score < 60"

>}分,考試不及格

h3>

<

h3 v-else-if

="score < 80"

>}分,繼續努力

h3>

<

h2 v-else-if

="score < 95"

>}分,考的不錯

h3>

<

h1 v-else

>}分,你真是太棒了!

h3>

<

button

@click

="btnclick()"

>查詢成績

button

>

div>

body

>

<

script

>

newvue(,

methods:

}});

script

>

html

>

列表渲染與條件渲染

作者 jeskson 達達前端小酒館 列表渲染與條件渲染 如何渲染陣列型別和物件型別的資料 渲染陣列 的所有資料 相同的結構是列表渲染的前提,列表等都會有 千上萬條的資料,它們的共同的特徵就是資料的結構相同。data 如何把整個列表都渲染出來呢?wx for 就是在陣列newstitle 進 迴圈 ...

Vue 模板渲染 條件渲染 列表渲染

當獲取到後端資料後,我們會把它按照一定的規則載入到寫好的模板中,輸出成在瀏覽器中顯示的 html,這個過程就稱之為渲染。而 vue.js 是在前端 即瀏覽器內 進行的模板 渲染。1.前後端渲染對比 前端渲染 的優勢 是在瀏覽器裡利用 js 把資料和 html 模板進行組合,業務分離,後端只需要提供資...

vue條件渲染

判斷1 count 大於0,count的值是 5 判斷2 count的值是 判斷3 count的值是 data 當count值為0時,符合判斷3,呼叫判斷3的語句輸出 5 判斷2 count的值是 判斷3 count的值是 從結果看出,只呼叫了判斷1,說明它的執行 情況是按照 塊順序來去進行的,當前...