使用過vue的小夥伴一定使用過v-if 這個屬性,但是這個屬性主要是來幹什麼的呢,他得用途是那些?
這裡我總結了一下,v-if使用一般有兩個場景:
下面我寫了兩個例子,是vue官方的簡單例項。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
vue中v-
if的常見使用<
/title>
"">
<
/script>
<
/head>
window.
onload
=function()
, methods:
else}}
})}<
/script>
>
"color:red"
>v-
if的簡單實用<
/div>
"type == 'a'"
>
a<
/div>
else-if
="type=='b'"
>
b<
/div>
else
>
c<
/div>
<
/template>
"color:green"
>v-
if的彈框切換<
/div>
"logintype === 'username'"
>
使用者名稱:<
/label>
"enter your username" key=
"username-input"
>
<
/template>
else
>
密碼:<
/label>
"enter your email address" key=
"email-input"
>
<
/template>
"changelogintype"
>切換狀態<
/button>
<
/div>
<
/body>
<
/html>
效果圖: vue中v if條件渲染
1.判斷後台返回的值是檢測中止 或出具報告的時候 讓更改狀態按鈕消失 已發樣等待收樣 支付完成等待發樣 出現取消專案 html部分 v for yong,index in yonghu key index class person box class person one span div clas...
vue頁面優化中的v show和v if使用比較
在頁面中使用了v if做了乙個tab框,點選不同的tab框,並載入不同的內容,由於各tab框對應的內容是4到5張統計圖,載入的資料量比較大,發現後台請求響應 返回的時間很快,在100ms以內,但點選tab框切換載入內容時,會有乙個明顯的卡頓感。v if 根據表示式的值在dom中生成或者銷毀乙個元素,...
vue中v if指令的使用之Vue知識點歸納 六
本文章描述 1 簡述 vue 中 v if 指令,顧名思義是用來進行條件判斷的,直接操作 dom 2 案例 vue v if指令title head click showclick v text buttonmessage h3 v if isshow 這裡是顯示的文字h3 div src scri...