iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0

昨天講完了「雙向綁定」,大家因該還記得有提到陣列v-for吧?它也是非常常用的基本語法喔!
先來寫個簡單的範例吧!我們用<ul><li>來寫一組共5人的名單,過去身為設計的我們,在寫靜態頁時一定是這樣寫的吧?

<template>
  <div id="app">
    <ul>
      <li>Adam</li>
      <li>Jack</li>
      <li>Candy</li>
      <li>Louis</li>
      <li>Larry</li>
    </ul>
  </div>
</template>

那如果改用v-for串資料呢?會是如何?

v-for實做

<template>
  <div id="app">
    <ul v-for="(item, index) in member" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        member:['Adam','Jack','Candy','Louis','Lurry']
      }
    }
  }
</script>

範例解說

上面寫的這些是什麼意思呢?讓我來說明一下:
我們先寫一組<ul><li>結構出來,並使用v-for="(item, index) in member"綁在<ul>上!

  • member:是我們在下方data()裡為資料陣列取的名子,item in是指在(in)member陣列裡的「單筆」資料,我把它取名叫item!換句話說就是<ul>裡面有綁了5筆item,這些item放在member裡面。
  • key:因為我們有好幾筆資料,程式會希望我們為各筆資料下key,好讓它分辦誰是誰,而目前我們只是單純的資料顯示,所以就直接拿indexkey區分囉!

不知大家有沒有注意到key前加的:號?這是什麼?
其實它是v-bind的簡寫,所以原來完整的寫法是v-bind:key="item"而為了增加編寫的效率,一般都會用簡寫。
那v-bind是什麼?它是屬性綁定的意思!以上面的範例來說就是:「屬性key要帶入資料item」,不熟沒關系,下次講到還會再提一次。

接著再來看data
我們寫了一組陣列取名叫member,陣列的寫法是要用[]包起(所以之後如果看見[]那就代表它裡面是一組陣列),陣列裡每個項目都是一個item(記得後面還有內容時,要加,)。

當然還要跟它說名子資料放在哪了!我們要放在<li>裡,所以就像之前教的,用{{}}將資料綁入!

一樣不難對吧!而且你資料寫了幾組,它就自動長幾組<li>出來,如下圖:
https://ithelp.ithome.com.tw/upload/images/20181017/20111956ocqjPgAREu.png

v-for多筆資料實做

那如果我們還要在名子下面加入其它資料呢?比如說每個人的email,這一樣很簡單的!就直接加上去吧!

<template>
  <div id="app">
    <ul v-for="(item, index) in member" :key="index">
      <li>{{ item.name }}<br />{{ item.mail }}</li>
    </ul>
  </div>
</template>

接著在資料中寫入(老樣子,一樣記得寫,號喔):

<script>
  export default {
    name: 'app',
    data() {
      return {
        member:[
          {
            name:'Adam',
            mail:'adam@xxx.com'
          },
          {
            name:'Jack',
            mail:'jack@xxx.com'
          },
          {
            name:'Candy',
            mail:'candy@xxx.com'
          },
          {
            name:'Louis',
            mail:'loui@xxx.com'
          },
          {
            name:'Lurry',
            mail:'lurry@xxx.com'
          }
        ]
      }
    }
  }
</script>

這次每個item有兩筆資料,所以我用{}包起一組資料,包起後它就成為了一個「物件」,當然一個物件就是一個itemitem裡面有名字及mail的資料,我直接取名叫namemail!最後分別綁入<li>裡,如{{ item.name }}就是指在item(物件)裡面的name(資料)。
完成,你會看到像下圖一樣!
https://ithelp.ithome.com.tw/upload/images/20181017/20111956NkYqLb99g6.png

好簡單對吧!維護起來也方便,改個資料就好!!而且現在範例是非常簡單的結構,如果<li>內還有更多層結構,你就不用像過去寫靜態頁一樣,複製一大堆相同的結構啦!

select與v-for實做

那昨天講「雙向綁定」時提到的select該怎麼寫?其實一樣囉!

<template>
  <div id="app">
    <select v-model="myName">
        <option v-for="(item, index) in member" :key="index">{{ item }}</option>
    </select>
    <p>我的名子叫:{{ myName }}</p>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        myName:'請選擇姓名',
        member:['Adam','Jack','Candy','Louis','Lurry']
      }
    }
  }
</script>

完成!很容易吧!v-model忘記的話可以回頭看一下( https://ithelp.ithome.com.tw/articles/10201973 )。


上一篇
Vue[06]-資料雙向綁定
下一篇
Vue[08]-Components
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言