2017/09/18 VUE 條件渲染

一. v-if

在字符串模板中,如Handlebars 报破,我們得像這樣寫一個(gè)條件塊

在vue.js使用v-if實(shí)現(xiàn)同樣的功能


# 在中配合v-if條件渲染一整組中配合v-if條件渲染一整組?<template> 中配合 v-if條件渲染一整組

<template v-if="ok">

<p>哈哈哈哈</p>

<h1>我要優(yōu)秀</h1>

</template>

最終渲染結(jié)果不會(huì)包含<template>元素

# 你可以使用v-else指令來(lái)表示v-if的“else 塊”
v-else元素必須緊跟在v-if或者v-else-if元素的后面——否則它將不會(huì)被識(shí)別到腥。


2.1.0 新增

v-else-if哼蛆,顧名思義篇亭,充當(dāng)v-if的“else-if 塊”隘膘∑旆遥可以鏈?zhǔn)降厥褂枚啻危?/p>


# 用key管理可復(fù)用的元素


如果兩個(gè)元素不需要服用,獨(dú)立的

沒(méi)有添加key值的標(biāo)簽仍然會(huì)被高效服用

如上例的<lable>


二. v-show

根據(jù)條件展示的內(nèi)容,類似于v-if

<p v-show="ok>Hello!!! </p>

v-show的不同處在于該標(biāo)簽會(huì)一直存在于DOM中并被渲染,只是根據(jù)條件判斷是否顯示,

切換display屬性的值

注意: v-show不支持<template>和v-else語(yǔ)法


三.v-ifvsv-show

v-if是“真正的”條件渲染纳击,因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建朱灿。

一般來(lái)說(shuō)昧识,v-if有更高的切換開銷,而v-show有更高的初始渲染開銷盗扒。因此跪楞,如果需要非常頻繁地切換,則使用v-show較好环疼;如果在運(yùn)行時(shí)條件不太可能改變习霹,則使用v-if較好。


四.v-if與v-for一起使用

v-for具有比v-if更高的優(yōu)先級(jí)炫隶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末淋叶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子伪阶,更是在濱河造成了極大的恐慌煞檩,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栅贴,死亡現(xiàn)場(chǎng)離奇詭異斟湃,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)檐薯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門凝赛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)注暗,“玉大人,你說(shuō)我怎么就攤上這事墓猎±瑁” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵毙沾,是天一觀的道長(zhǎng)骗卜。 經(jīng)常有香客問(wèn)我,道長(zhǎng)左胞,這世上最難降的妖魔是什么寇仓? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮烤宙,結(jié)果婚禮上遍烦,老公的妹妹穿的比我還像新娘。我一直安慰自己躺枕,他們只是感情好乳愉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屯远,像睡著了一般蔓姚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上慨丐,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天坡脐,我揣著相機(jī)與錄音,去河邊找鬼房揭。 笑死备闲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的捅暴。 我是一名探鬼主播恬砂,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蓬痒!你這毒婦竟也來(lái)了泻骤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤梧奢,失蹤者是張志新(化名)和其女友劉穎狱掂,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亲轨,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡趋惨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惦蚊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片器虾。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡讯嫂,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兆沙,到底是詐尸還是另有隱情端姚,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布挤悉,位于F島的核電站,受9級(jí)特大地震影響巫湘,放射性物質(zhì)發(fā)生泄漏装悲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一尚氛、第九天 我趴在偏房一處隱蔽的房頂上張望诀诊。 院中可真熱鬧,春花似錦阅嘶、人聲如沸属瓣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)抡蛙。三九已至,卻和暖如春魂迄,著一層夾襖步出監(jiān)牢的瞬間粗截,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工捣炬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留熊昌,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓湿酸,卻偏偏與公主長(zhǎng)得像婿屹,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子推溃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容昂利,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,050評(píng)論 0 29
  • 一铁坎、初探條件渲染 vue 的條件渲染页眯,仍舊依賴于指令系統(tǒng),下面逐個(gè)介紹: (1)v-if 當(dāng) c1 為真值的時(shí)候厢呵,...
    ebfc7d0362e4閱讀 1,665評(píng)論 0 1
  • v-if # <template> 中 v-if 條件組 因?yàn)?v-if 是一個(gè)指令窝撵,需要將它添加到一個(gè)元素上。但...
    angelwgh閱讀 291評(píng)論 0 0
  • vue.js 從基礎(chǔ)到實(shí)戰(zhàn) Vue.js 介紹 什么是vue vue一詞是法語(yǔ)襟铭,同英語(yǔ)中的view碌奉。vue.js是...
    記憶的時(shí)間差閱讀 2,219評(píng)論 1 25
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,214評(píng)論 0 6