「Vue.js」v-forディレクティブで配列データを画面にリストで表示する

環境
Vue2.6.14

書式
<要素名 v-for="要素 in コレクション" />
<div id="セレクター名">
<li v-for="変数名 in 配列名">
{{ 変数名.配列のキー名 }}
</div>
v-forディレクティブを使用して、繰り返し処理を行うことでHTML要素を出力します。
使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 最新IT技術情報_arkgame.com</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
 <div id="app">
    <ul>
      <li v-for="cft in cityList">
        {{ cft.cityname }}
      </li>
    </ul>
  </div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    cityList: [
      { cityname: '東京-tokyo' },
      { cityname: '横浜yokohama' },
      { cityname: '北海道hokaito' }
    ]
  }
})
</script>
</body>
</html>

実行結果

■ 東京-tokyo
■ 横浜yokohama
■ 北海道hokaito

 

Vue.js

Posted by arkgame