[Vue.js] 配列データを画面上にリストで表示する

投稿日：2021年3月19日更新日：2021年5月1日

Vue.jsで配列データを画面上にリストで表示するサンプルです。

サンプルソース

例）配列データを画面上にリストで表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.jsサンプル</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="dt in dtList">
        {{ dt.text }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="sample.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vue.jsサンプル</title>

</head>

<body>

<ul>

</li>

</ul>

</div>

</body>

</html>

//Vue.jsの初期設定
var app = new Vue({
  el: '#app',
  data: {
    dtList: [
      { text: '東京' },
      { text: '名古屋' },
      { text: '大阪' }
    ]
  }
})

//Vue.jsの初期設定

var app = new Vue({

el: '#app',

data: {

dtList: [

{ text: '東京' },

{ text: '名古屋' },

{ text: '大阪' }

]

}

})

（結果）: ・東京・名古屋・大阪

解説

HTMLの「id="app"」とjsの「el:"#app"」が対応しています。
HTMLの「v-for="dt in dtList"」の箇所で、dtList配列をforeachのように扱っています。

執筆者：とら