リストを表示する

オンラインスキルアップのサンプルコード

by wintyo

HTML

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      list: [1, 2, 3, 4]
    };
  },
  template: `
    <div>
      <ul>
        <template v-for="item in $data.list">
          <li>{{ item }}</li>
        </template>
      </ul>
    </div>
  `
});