• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載七」vue.js指令v-for
    時間: 2018-11-09 10:31:09     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-show”,本篇文章講解“vue.js指令v-for”。


    v-for

    v-for循環語法:

    「Vue.js開發連載七」vue.js指令v-for



    1. 循環數組

    1)v-for循環數組

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    2)獲取數組索引

    每次循環還可以獲取數組的索引:

    「Vue.js開發連載七」vue.js指令v-for


    獲取數組索引:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    3)vue重定義了數組原型上的方法

    由于js中對數組操作的方法都不支持回調(es6之前),所以對于數組的操作Vue通過重寫Array類型數據的原型(prototype)上的方法,來加入回調處理,得以實現數組數據的自動響應。

    這些方法包括:push() / pop() / shift() / unshift() / splice() / sort() / reverse()

    所以這里有一個特別要注意的操作就是vue不能檢測到通過索引設置值的這個動作,看下面的錯誤的例子:

    「Vue.js開發連載七」vue.js指令v-for


    當我們點了按鈕一定以為頁面會出現數字100,2,3,但實際頁面是不會有變化的,就像上面解釋的,vue只能通過上面的幾個數組方法來操作數組的值,所以正確的方式是:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    splice是vue開發中最長用的一個數組方法,請牢記的他的語法,第一個參數代表要刪除哪個索引上的值,第二個參數代表要刪除幾項,第三個參數代表要在第一個參數對應的索引上對數組的值進行替換。


    2. 循環對象

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    循環對象時,可以獲取對象的鍵與索引。

    「Vue.js開發連載七」vue.js指令v-for


    獲取對象的鍵與索引:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for



    3. 循環數字

    v-for也可以循環整數。在這種情況下,它將重復多次模板,多用于生成時間模板。

    「Vue.js開發連載七」vue.js指令v-for


    v-for循環數字:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for



    4. 循環字符串

    循環字符串與循環數組類似,字符串中每一個字符為一項。

    「Vue.js開發連載七」vue.js指令v-for


    v-for循環字符串:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    循環字符串時,也可以獲取字符串索引。

    「Vue.js開發連載七」vue.js指令v-for


    獲取字符串索引:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for



    5. :key

    默認每個循環的元素都相當于隱式的加了:key="$index",$index是循環的索引,他的意義是當我們循環一個數組,然后打亂數組順序,默認vue不會重新渲染每個節點,而是重新給每個節點賦值和賦屬性值,雖然性能非常好,但是一些情況下比較失控。

    比如之前input的例子,還有當對循環的每一項都加位移動畫的時候,如果沒有獨立的key,那么你會發現動畫會非預期的變化。

    所以強烈建議給循環的每個元素都要key,除非你十分需要這個部分復用帶來的性能,一般開發中很少遇到非要復用的情況。

    注意:vue2.20版本后要求:key在v-for循環時必填。


    6. 配合v-if

    當它們處于同一節點,v-for的優先級比v-if更高,這意味著v-if將分別重復運行于每個v-for循環中。當你想為僅有的一些項渲染節點時,這種優先級的機制會十分有用,如下:

    「Vue.js開發連載七」vue.js指令v-for


    瀏覽器訪問:

    「Vue.js開發連載七」vue.js指令v-for


    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載七」vue.js指令v-for


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指令v-on”

    「Vue.js開發連載七」vue.js指令v-for
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>