二、v-if 與 v-show
總結什麼是vue指令？
vue指令是在vue中提供了一些對於頁面 + 資料的更為方便的輸出,這些操作就叫做指令, 以v-***表示，類似於html頁面中的屬性 `。
比如在angular中 以ng-***開頭的就叫做指令，在vue中 以v-***開頭的就叫做指令。
指令中封裝了一些dom行為, 結合屬性作為乙個暗號, 暗號有對應的值,根據不同的值，框架會進行相關dom操作的繫結
v-cloak：解決網速過慢會導致資料還沒顯示在瀏覽器端，直接將**原始碼呈現在瀏覽器端的問題。
使用方法：
//使用方法：：插入文字>
//v-cloak直接新增在資料的父元素上
}<
/p>
<
/div>
<
/body>
let vm =
newvue(}
)<
/script>v-test
>
}//hello vue ~~
//=後寫資料
<
/p>
//hello vue ~~
<
/div>
<
/body>
newvue(}
)<
/script>v-html：可插入可被html解析的**片段
>}//
<
/p>
//hello vue ~~
<
/div>
<
/body>
newvue(}
)<
/script>v-pre：有些情況我們不需要data內的資料，想要直接插入值
>
}<
/p>
//hello vue ~~
}<
/p>
//msg
<
/div>
<
/body>
newvue(}
)<
/script>v-once：避免資料被重新賦的新值覆蓋
>
}<
/p>
//現在的生活
//使用v-once之後，再重新賦值已經沒有效果
}<
/p>
//最初的夢想
<
/div>
<
/body>
newvue(,
mounted()
})<
/script>v-model：資料的雙向繫結，實時顯示更改資料
>
"text" value=
"" v-model=
"msg"
>
}<
/p>
<
/div>
<
/body>
newvue(}
)<
/script>v-on：監聽dom事件，可簡寫為@
>
//實現乙個簡易的加減功能
"text" value=
"" v-model=
"num"
>
'add'
>+1
<
/button>
'sub'
>-1
<
/button>
<
/div>
<
/body>
newvue(,
methods:
,sub()
}})<
/script>v-bind：動態地繫結乙個或多個屬性
>
//將 srcurl 繫結在src屬性上，頁面會呈現srcurl的
"srcurl" alt=
"">
<
/div>
<
/body>
newvue(,
mounted()
})<
/script>v-if與v-show都是條件渲染，相比之下v-if是「真正」的條件渲染，因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。(來自vue官網)
v-if也是「惰性」的，如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。(來自vue官網)
v-if也可用做條件判斷，用法與js中的if判斷類似，v-else-if必須緊跟在帶v-if或者v-else-if的元素之後。(來自vue官網)
與>
'suc>=90&&suc<=100'
>優秀<
/p>
else-if
='suc>=80&&suc<90'
>良好<
/p>
else-if
='suc>60&&suc<80'
>一般<
/p>
else
>
}同志仍需努力<
/p>
<
/div>
let vm =
newvue(}
)<
/script>
v-ifv-show都是條件渲染，相比之下v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 css 進行切換。(來自vue官網)
>
'show'
>看不到我<
/a>
<
/div>
<
/body>
let vm =
newvue(}
)<
/script>那麼我們什麼時候用v-if什麼時候用
v-show呢？一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show較好；如果在執行時條件很少改變，則使用 v-if 較好。（來自vue官網）
以上就是本篇要講的內容，希望可以有用可以幫到您
vue常用指令
1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...
vue常用指令
常用內建指令 v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為true,當前標籤才會輸出到頁面 v else 如果為false,當前標籤才會輸出到頁面 v show 通過控制display樣式來控制顯示 隱藏 v for 遍歷陣列 物件...
vue常用指令
vue常用指令 1.v text v text主要用來更新textcontent，可以等同於js的text屬性 2.v html 雙大括號的方式會將資料解釋為純文字，而非html。為了輸出真正的html，可以用v html指令。它等同於js的innerhtml屬性。3.v pre v pre主要用來...