iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

Vue的菜鳥開發學習歷程系列 第 11

[Day11] 菜鳥 Vue 循環補充

  • 分享至 

  • xImage
  •  

來慧根一下之前的迴圈圈唄~

  • Vue的基本語法3: for(迴圈)
    v-for 」: 列表式渲染
    官方說法:

    We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on.

    List Rendering

    You can also use of as the delimiter instead of in, so that it is closer to JavaScript’s syntax for iterators:

    Mapping an Array to Elements with v-for

    好的~
    官方完 再留來就是Rookie發言啦:
      一個 陣列物件 用「 v-for 」來迭代渲染出一個列表

    對吼! 說不定有人不知道何謂迭代(疊代)
    因為...我自己知道這詞但模模糊糊意思
    來佔版面下好了

    在電腦科學中,疊代是程式中對一組指令(或一定步驟)的重複。它既可以被用作通用的術語(與「重複」同義),也可以用來描述一種特定形式的具有可變狀態的重複。
    在第一種意義下,遞迴是疊代的一個例子,但是通常使用一種遞迴式的表達。比如用0!=1,n!=n*(n-1)!來表示階乘。而疊代通常不是這樣寫的。
    而在第二種(更嚴格的)意義下,疊代描述了在指令式程式語言中使用的編程風格。與之形成對比的是遞迴,它更偏向於聲明式的風格。
    這裡是一個依賴於破壞性賦值的疊代的例子,以指令式的虛擬碼寫成:

        var i, a = 0         // 疊代前初始化
        for i from 1 to 3    // 重複3次
        {
            a = a + i        // a的值增加i
        }
        print a              // 列印出數字6
    

    在這個程式片段中,變數i的值會不斷改變,依次取值1、2和3。這種改變賦值——或者叫做可變狀態——是疊代的特徵。

    疊代

    哼哼,維基百科一下吧
    好的懂了嗎
    Rookie的我理解...
    迭代: 「依序賦值」

    看吧看吧
    迴圈是不是也像這樣~

    好的 繼續
    所以我們有兩種類型做 v-for 迭代
    這邊就有一些些不太一樣
    但又一樣
    哼哼 因為javascript吧XD

    • v-for Array:
       迭代陣列先講講,因為最為直覺
       阿我就陣列啊,依序取出來陣列的東西啊
        <li v-for="(item, index) in items">
            ...
        </li>
    

    哈哈,內容不重要就不寫啦~
    注意注意
    v-for 提供參數的格式「 (item, index) 」:
    item 會是items裡依序的值,如果items是[ '我', '是', 'Roo', 'kie']
    那item就會迭代出: '我','是','Roo','kie'
    那index勒?
    javascript裡的陣列起始位置為「 0 」
    所以index會迭代出: 0, 1, 2, 3
    補一下,但長度會是「 4 」唷
    好的~好理解吧

    最近精神有些不濟,明天再努力下 /images/emoticon/emoticon29.gif


上一篇
[Day10] 菜鳥 Vue 循環之路
下一篇
[Day12] 菜鳥 Vue 循環物件
系列文
Vue的菜鳥開發學習歷程12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言