最新 New

[公告]草監網路更改網址至gratch.tw

0

[教學] Vue js快速上手 (六) 一定要懂for loop

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
在寫教學的過程中很囧的一件事就是，教學還沒寫完新版本就誕生了，這就是我中途又去忙了一個多月之後，回來發現的第一件囧事，是的，Vue.js 2.0 釋出了，所以我花了一點時間概略地在看了一下，還有之前寫的五篇教學。所幸，因為我寫的是快速上手，都是基本用法與觀念，在新版的Vue.js變化不大，不影響之前五篇的教學範例，所以已經看了這系列教學的朋友其實不用太擔心，我也將教學裡面本來使用1.0.26版本的Vue.js，全數都改成了2.0.1版本的Vue.js了。

好了，這篇我們要來學一個跟if一樣很重要的東西，就是所謂的for，通常你學一個新的程式語言，不管你怎麼學，都會看到if else跟for 這兩個東西，也就是說當你學一個新語言，這兩個東西一定是在必定要學、要看的範圍裡，所以本篇我們再來看看for loop吧！

for loop 通常是用來處理列表或是重複輸出一樣格式的元素時再使用的，比方說我要在頁面上產生10個div、10個li，或是輸出九九乘法表這類的資料時，for loop就是你肯定要使用的第一選擇了！首先我們先來看看如何輸出1~10吧！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

         <div id="app">
            <span v-for="n in 10">{{ n }}</span>
        </div>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html>
上面這段code執行後你會發現在頁面會出現“12345678910”，有沒有覺得超簡單？看不懂？，其實我在span這裡加上了v-for屬性，屬性值裡面寫的意思是“變數n在10裡面”，然後樣本{{ n }} 則是輸出n這個變數，所以vue.js自然就會知道我的n要從1開始，一直跑到10，自然頁面上就會輸出1~10了。如果你不是用Vue.js v2，你是用v1例如版本1.0.26，那n的變數會從0開始輸出10個數字，你就會得到“0123456789”，所以如果你想要從1開始記得用n+1喔。

那要怎麼寫出九九乘法呢？我跟你說，真的超簡單，就用上面那個範例再多幾行就結束了！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

         <div id="app">
            <div v-for="i in 9">
              <h3>{{ i }}</h3>
              <div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
            </div>
        </div>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html>
真的！就這樣四行，九九乘法就搞定了！有沒有超簡單？當然一般用v-for不光只是要輸出數字而已，就像我開頭有說for loop，通常拿來輸出列表用的，那假設我們有一個表是蘋果、香蕉、椰子，那我們要怎麼用v-for輸出呢？很簡單，我們只要把蘋果、香蕉、椰子放進data裡，我們就可以輸出在頁面了，以下就是範例。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

         <div id="app">
            <ul>
              <li v-for="item in items">
                {{ item.message }}
              </li>
            </ul>
        </div>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    items: [
                      { message: 'Apple' },
                      { message: 'banana' },
                      { message: 'Coconut' }
                    ]
                }
            });
        </script>
    </body>
</html>
是的，所以我們把蘋果、香蕉、椰子這些資料放進data裡，取名items，然後在v-for屬性裡設定一個變數叫item（你要改叫n或改叫i都行），然後就會開始輸出items的第一個、第二個、第三個，而當前items裡的第一個值、第二個值、第三個值就會自動帶入item中，然後第一、第二、第三的一二三，我們稱之為index，也就是目錄順序的意思，有需要也是可以輸出的。

在舉一個例子，比方說地址好了，台北市裡面有中山區、大同區、中正區，這樣資料要怎麼放進data裡？
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

         <div id="app">
            <ul>
              <li v-for="(item, index) in items">
                {{ parentMessage }} - {{ index }} - {{ item.message }}
              </li>
            </ul>
        </div>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data: {
                  parentMessage: '台北市',
                  items: [
                    { message: '中正區' },
                    { message: '中山區' },
                    { message: '大同區' }
                  ]
                }
            });
        </script>
    </body>
</html>
這時候我們就可以用perantMessage來帶入台北市這樣的資料，然後上述的範例我也把index輸出在畫面上，你可以明確看到index的用途，最後，“item in items”這裡的in你要改成of 也是沒問題的，效果是一樣的，v-for的用法就介紹到這裡，用法真的不難，只是要如何運用得好就真的不是一件簡單的事了，希望到目前為止的教學可以讓你覺得得心應手、上手無障礙喔！

留言

張貼留言