Vue2.0學習筆記一 :各種表達式


#,過濾器
    #,在Vue2.x中,過濾器只能在mustache綁定中使用,為了在指令幫定中實現同樣的行為,你應該使用計算屬性;
    #,過濾器可以串聯 {{ message | filterA | filterB }}

#,條件渲染
    #,注意v-if與v-show的區別,v-if是決定是否創建DOM,而v-show則是DOM始終存在,只是改變了顯示樣式;
    #,如果要切換多個元素的時候,我們就使用<template v-if='ok'>;
    #, v-if  有更高的切換消耗而  v-show  有更高的初始渲染消耗。因此,如果需要頻繁切換使用  v-show  較好,如果在運行時條件不大可能改變則使用  v-if  較好。

#,列表渲染
    #,<li v-for='item in items>{{item.message}}</li>,也可以用of 代替in,這種語法和JavaScript的語法更加接近;
    #,和v-if類似,如果我們要渲染多個元素,則可以使用 <template v-for='item in items> <xxxx> < bbb> </tempate>
    #,用v-for不但可以迭代數組,也可以迭代對象,然后item就表示對象的屬性值,當然,也可以像下面這樣獲取到對象屬性的key、value、index;
    <ul>
      <li v-for='(value, key, index) in person'>
        {{key}}, {{value}}, {{index}} 
    </ul>

#,還可以使用v-for迭代取整數;<span v-for="n in 10">{{ n }} </span>
#,可以在自定義組件中使用v-for,此時如果要把v-for的item值傳遞給子組件,需要用到子組件的prop屬性;
#,為了提高在items變化時v-for的渲染效率,我們最好給元素指定一個key,例如:
     < div v-for = "item in items" :key = "item.id" >
 
 
 
         
<!-- 內容 -->
</div>







免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM