資訊專欄INFORMATION COLUMN
摘要：條件渲染也可以用添加一個塊在中配合渲染一整組因為是一個指令，需要將它添加到一個元素上。最終的渲染結果不會包含元素。帶有的元素始終會被渲染并保留在中。
條件渲染 v-if
Yes
也可以用 v-else 添加一個 “else” 塊：
在中配合v-if 渲染一整組Yes
No
因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 元素當做包裝元素，并在上面使用 v-if。最終的渲染結果不會包含 元素。
v-else v-else-ifTitle
Paragraph 1
Paragraph 2
v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的后面——否則它將不會被識別。v-else-if，顧名思義，充當 v-if 的“else-if 塊”。可以鏈式地使用多次：
及格
優秀
不及格
var vm=new Vue({
data:{
grade:60
}
});
用key管理可復用的元素類似于 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素之后。
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。
var vm=new Vue({
el:"#app",
data:{
loginType:"email"
},
methods:{
qiehuan:function(){
if(this.loginType=="email"){
this.loginType=="username"
}else{
this.loginType=="email"
}
}
}
});
那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。
Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可：
注意， v-show
帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。
注意， v-show 不支持 語法，也不支持 v-else。 v-if vs v-showHello!
v-if與v-for一起用v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
var vm=new Vue({
data:{
items:[
{text:"chifan",isOk:true},
{text:"shuijue",isOk:false},
{text:"kandianshi",isOk:true},
{text:"dayouxi",isOk:true},
{text:"kandianying",isOk:false},
]
}
});
如果你的目的是有條件地跳過循環的執行，那么可以將 v-if 置于外層元素 (或 )上。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85151.html
摘要：在中配合條件渲染一整組因為是一個指令，需要將它添加到一個元素上。因此，如果需要非常頻繁地切換，則使用較好如果在運行時條件不太可能改變，則使用較好。 vue的條件渲染 v-if v-if指令可以插入和刪除所命令的模板 Yes data:{ ok:true } 輸出HTML Yes 當我們更改 ok 為 false時我們會發現頁面的 Yes 消失，在控制臺里面會發現 h1 標簽也已...
摘要：使用了基于的模板語法，允許開發者聲明式地將綁定至底層實例的數據。所有的模板都是合法的，所以能被遵循規范的瀏覽器和解析器解析。列表中使用把數組渲染成選項列表。我們通過這些渲染方式就可以輕松的通過數據控制頁面的顯示內容了。 Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被...
摘要：如果一次判斷的是多個元素，可以在內置的元素上使用條件指令，最終渲染的結果不會包含該元素。列表渲染也支持用代替作為分隔符，它更接近迭代器的語法的表達式支持一個可選參數作為當前項的索引。分隔符前的語句使用括號，第二項就是當前項的索引。 學習筆記：內置指令 內置指令 基本指令 v-cloak v-cloak不需要表達式，它會在Vue實例結束編譯時從綁定的HTML元素上移除，經常和CSS的d...
摘要：條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時候，我們需要將它添加到這個元素上去。最終的渲染結果不會包含元素。渲染如下列表渲染使用把一個數組對應為一組元素我們用指令根據一組數組的選項列表進行渲染。 條件渲染 上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...下一篇：Vue的事件處理方法：https:/...
摘要：在模板中放入太多的邏輯會讓模板過重且難以維護。它會根據控件類型自動選取正確的方法來更新元素。指令需要使用的語法，指的是原數據數組，指的是迭代的數組元素。 注：本教程所使用的vue版本為 2.5.16 MVC與MVVM MVC（Model-View-Controller）： M指的是從后臺獲取到的數據， V指的是顯示動態數據的html頁面， C是指響應用戶操作、經過業務邏輯處理后去更新...
閱讀 1605·2021-11-04 16:11
閱讀 3316·2021-09-09 11:33
閱讀 1566·2019-08-30 15:54
閱讀 623·2019-08-30 15:44
閱讀 3180·2019-08-30 15:43
閱讀 2561·2019-08-30 13:06
閱讀 1701·2019-08-29 17:00
閱讀 903·2019-08-29 15:33
