2020 年 11 月 16 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

vue.js 的迴圈(Loop) v-for 指令技巧

1 min read
忘憂谷

vue.js 的迴圈(Loop) v-for 指令技巧,通常在取得陣列 ( Array ) 中的 Key & Value

 

  • v-for 指令在含有 Key & Value 的 Array 陣列中

可以使用例如 city in cities 形式的特殊語法來取得, cities 是來源資料陣列並且 city 是陣列元素反覆運算的別名,v-for 可以綁定資料到陣列來渲染一個清單:

JS:

<script>
var app = new Vue({
  el: '#app',
  data: {
    cities: [
      { name: 'New York' },
      { name: 'Tokyo' },
      { name: 'Montreal' }
    ]
  }
})
</script>

HTML:

<div id="app">
  <ol>
    <li v-for="city in cities">
      {{ city.name }}
    </li>
  </ol>
</div>

vue.js 模版 ( Template ) 的表示式:

<ul>
  <template v-for="city in cities">
    <li>{{ city.name }}</li>
    <li>--------------</li>
  </template>
</ul>

 

  • v-for 指令在取得含有 Key & Value 的物件

JS:

<script>
var app = new Vue({
  el: '#app',
  data: {
    object: {
      name: 'IT Skills',
      url: 'https://polinwei.com',
      slogan: '資訊工作者的技術手紮'
    }
  }
})
</script>

HTML:可以只取物件的值(Value)

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

HTML:也可以取物件的 key & Value

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

 

  • v-for 指令在取得僅含有  Value 的陣列(Array)

JS:

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: [
      { '密碼需要一個大寫字母' },
      { '密碼需要一個小寫字母' },
      { '密碼需要一個數字' }
    ]
  }
})
</script>

HTML:

<div id="app">
  <ul>
    <li v-for="(value, index) in message">
     {{ index }} : {{ value }}
    </li>
  </ul>
</div>

 

 

Copyright © All rights reserved. | Newsphere by AF themes.