基礎からメモ： Vue.js CH2-p82 その他繰り返しに関すること

Vue.js

オプションにデータを持たないv-for

数値範囲や配列リテラルを直接v-forに渡すこともできる。

<ul>
   <li v-for="item in 5">Num1: {{ item }}</li>
</ul>
  • Num1: 1
  • Num1: 2
  • Num1: 3
  • Num1: 4
  • Num1: 5
<ul>
   <li v-for="item in [1, 5, 10, 15]">Num2: {{ item }}</li>
</ul>
  • Num2: 1
  • Num2: 5
  • Num2: 10
  • Num2: 15

文字列に対するv-for

文字列をv-forに渡すと、１文字ずつ処理される。テキストアニメーションなどで使用できる。

<p v-for="item in text">{{ item }}</p>

var app = new Vue({
  el: '#app',
  data: {
      text: 'Hello Vue'
  }
})

表示結果

<p>H</p>
<p>e</p>
<p>l</p>
<p>l</p>
<p>o</p>
<p> </p>
<p>V</p>
<p>u</p>
<p>e</p>
  • 数値範囲や配列リテラルを直接v-forに渡すこともできる。
  • 文字列をv-forに渡すと、１文字ずつ処理される。