Vue基礎之內部指令（上）

BoYang 發布于2019-08-30 15:55 / 2473人閱讀

摘要：以及條件指令類似于里的，這三個指令根據表達式的值對組件進行渲染銷毀。如果想一次性判斷多個元素，可以將他們包裹在之內，使用條件指令操作外層的，并不會包含在最終的渲染結果中。要是不希望被復用，需要在指定的元素上添加值，值存在且唯一。

v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else

類似于JavaScript里的if、else-if、else，這三個指令根據表達式的值對DOM/組件進行渲染/銷毀。

值得注意的是，v-else-if必須跟在v-if之后，v-else必須跟在v-else-if或者v-if之后。
如果想一次性判斷多個元素，可以將他們包裹在template之內，使用條件指令操作外層的template，template并不會包含在最終的渲染結果中。

Vue在渲染元素時，出于效率考慮，會盡可能的復用已有元素而非重新渲染。

點擊“toggle”按鈕，輸入框內的placeholder改變，但當輸入內容再進行切換后，內容依舊存在，說明被復用了，只是修改了placeholder。

要是不希望被復用，需要在指定的元素上添加key值，key值存在且唯一。

v-show

面試考點：v-show和v-if實現的視覺效果完全一致，但是還是有本質區別的，v-show改變CSS display的值，v-if徹底移除元素。
開發技巧：因為v-show是改變CSS屬性，無論表達式真假與否，都會被編譯。v-if直接操作DOM的移除/渲染，所以v-if更適合不經常變化的場景，v-show適合頻繁變化的場景。

列表循環指令v-for

表達式需結合in使用，類似v-for="item in items"

數組


  
    {{index}}-{{item}}

用v-for將items中的數據循環渲染，item相當于items元素的別名，同時還支持index作為可選索引

對象

遍歷對象屬性時，有兩個可選參數，分別為鍵名和索引


  
    {{index}}-{{key}}:{{value}}

整數

{{ n }}

輸出：12345

v-text和v-html v-text

面試考點：v-text和{{}}功能一樣，展示文本，但是v-text比{{}}好的地方是，當網速很慢或者javascript出錯時，會暴露我們的{{xxx}}，而v-text不會顯示出來。

v-html

面試考點：v-html和v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標簽解析后輸出。


message: "Hello world",

Hello world
以上是本期全部內容，欲知后事如何，請聽下回分解<(￣︶￣)↗[GO!]

GPU云服務器云服務器之基礎篇 vue基礎教程 linux基礎指令黑客基礎之DOS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117325.html

Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

maybe_009 2019-08-30 15:55 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

2bdenny 2019-08-02 14:11 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

LMou 2019-08-26 13:31 評論0 收藏0
Vue基礎之內部指令（上）

摘要：以及條件指令類似于里的，這三個指令根據表達式的值對組件進行渲染銷毀。如果想一次性判斷多個元素，可以將他們包裹在之內，使用條件指令操作外層的，并不會包含在最終的渲染結果中。要是不希望被復用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else 類似于JavaScript里的if、else-...

Keagan 2019-08-02 14:11 評論0 收藏0