v-forでオブジェクトを表示

オブジェクトとは

全てのデータはオブジェクトです。配列やHash、数字や文字列も、オブジェクトです。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="value in object">{{ value }}</li>
</ul>
</div>

new Vue({
  el: '#app',
 data: {
   object: {
   firstName: '太郎',
   lastName: '田中',
   age: '20才'
           }
       }
})

表し方

v-for 適当に名前をつけて（valueで）　in 設定オブジェクト名

*firstName,lastName,ageがキーで太郎,田中,20才がバリューと言います。

第2引数を表現

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(value, key) in object">{{key}},{{ value }}</li>
           第1引数　第2引数
</ul>
</div>

第３引数を取得

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(value,key,index) in object">({{index}}){{key}},{{ value }}</li>
</ul>
</div>