v-if && v-else-if && v-else
阿新 • • 發佈:2018-11-12
一 : v-if
作用
: 判斷是否載入固定的內容,如果為真,就載入,否則不載入用處
: 用在許可權管理,頁面載入語法
: v-if="判斷表示式"特點
: 控制元素插入或刪除,而不是隱藏(v-show是隱藏)v-if與v-show的區別
:
- v-if的安全級別更高,v-show只是隱藏了,通過頁面原始碼還是可以看到,安全級別低、
- v-if更高的切換消耗(切換消耗指從未載入到載入或者從載入到未載入的狀況,需要新增或刪除這個元素),v-show需要更高的初始化渲染消耗
- 因此如果需要頻繁切換而對安性無要求,使用v-show;如果執行時,條件不能改變,使用v-if
6.v-if和v-for的區別
: 當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優先順序。舉個栗子1
<div id="app">
<h1 v-if="status == 'ok' ">yes</h1>
<h1 v-else>no</h1>
</div>
var app = new Vue({
el : '#app',
data : {
status : 'ok'
}
});
執行結果 :app.status = 'ok' 則顯示yes,status=任何其他的值都顯示no栗子2
<template v-if="status == 'ok'">
<h1>title</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
</template>
執行結果 : 條件成立時,這三條語句同時顯示在頁面上
title
paragraph 1
paragraph 2
拓展一點:
template用於包裹純文字或者沒有大的父級元素包裹的情況下,比如一段文字需要載入,而沒有別的元素包裹它,就可以用template來包裹
栗子3
<div id="app4">
<p v-if="seen">v-if根據條件顯示與隱藏</p>
</div>
var app4 = new Vue({
el : '#app4',
data : {
seen : true
}
})
執行結果 :
從上述動圖我們可以看到 : v-if如果判斷不成立,就不會在DOM中渲染,也不會將對應的語句顯示在頁面上
二 :v-else
v-else要緊跟在v-if後面,表示v-if條件不成立時執行
三 : v-else-if
表示多次,在v-if和v-else中間栗子4
<div id="app5">
<div v-if="status == 'loading'">
<div style="background-color:blue">loading</div>
</div>
<div v-else-if="status === 'success'">
<div style="background-color:green">success</div>
</div>
<div v-else="status == 'fail'">
<div style='background-color:red'>fail</div>
</div>
</div>
var app5 = new Vue({
el : '#app5',
data : {
status : 'loading'
}
})
執行結果 :