基礎からメモ： Vue.js CH2-p55 配列要素の表示

Vueインスタンスのdataに、配列を使用した例。

[main02.js]

var app = new Vue({
  el: '#app',
  data: {
    // オブジェクトデータ
    message: {
      value: "Hello Vue.js!"
    },
    list: ['りんご','ばなな','いちご'],
    num: 2
  }
})

オブジェクトデータの文字列だけでなく、その長さや、他の配列の個別要素を表示してみる。

[index02.html]

  <div id="app">
    <p>Message: {{ message.value}}</p>
    <p>Message Length: {{ message.value.length}}</p>
    <p>List[１]： {{ list[1] }}</p>
    <p>List[2]： {{ list[num] }}</p>
  </div>

{{ list[num] }}という形で、データのインデックスに他のデータを使ったりもできる。

• Vueインスタンスのdataには、配列も登録できる。