「Vue.js」v-forでリストを作成するサンプル

環境
Vue.js 3.0.0
Google Chrome　98.0.4758.102

書式
<div v-for="変数名 in リスト名" class="item">{{ 変数名 }}</div>
「v-for」を使用してリストを作成します。
使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>v-forでリストを作成するサンプル</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
        <div v-for="city in cityList" class="item">{{ city }}</div>
    </div>
  <script>
    const cft = {
      data() {
        return {
          cityList: [ '東京', '大阪', '福岡']
        }
      }
    }
    Vue.createApp(cft).mount('#app')
  </script>
</body>

</html>

結果
画面に「東京」　「大阪」　「福岡」リストを表示します。

Vue.js

Posted by arkgame