iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
2

Imgur

List Rendering

v-for with an Array of Object

<ul id="app">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/pstyqm0b/1/

v-for with Object

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/k6rgyoLt/1/

v-for with a Range

<div id="app">
  <span v-for="n in 10">{{ n }} </span>
</div>
new Vue({
  el: '#app',
})

附上 fiddle https://jsfiddle.net/hunterliu/jyh6dt64/

v-for vs v-if

若 v-for 和 v-if 存在同一個節點,v-for 優先於 v-if。

簡單改寫 v-for array of object 的範例:

<ul id="app">
  <li v-for="item in items" v-if="item.isShow">
    {{ item.message }}
  </li>
</ul>
var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo', isShow: true},
      { message: 'Bar', isShow: false}
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/o3j028zs/1/

若需判斷是否要執行 v-for,可以將 v-if 放在外層。

改寫上面範例:

<ul id="app" v-if="items.length">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo'},
      { message: 'Bar'}
    ]
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/kfd4ksa1/1/

參考資料

另一個鐵人賽挑戰題目連結「每天學一個 Lodash.js的函式


上一篇
用範例理解 Vue.js #10:Conditional Rendering
下一篇
用範例理解 Vue.js #12:Event Handling(v-on)
系列文
用範例理解 Vue.js30

2 則留言

0
rutentest
iT邦新手 5 級 ‧ 2017-12-21 23:31:16

v-for with Object的範例放錯惹

感謝提醒,已經更新。
/images/emoticon/emoticon13.gif

0
Ben the dust
iT邦新手 5 級 ‧ 2017-12-22 23:06:36

好猛喔,Vue直接在HTML可以套迴圈也太方便

我要留言

立即登入留言