vuejs之v-for

时间：2020-02-17 10:43:31 阅读：85 评论：0 收藏：0 [点我收藏+]

标签：索引数据 code pre style 删除 head click htm

看一个例子：

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in arr">
        索引：{{index}}，值：{{item}}
      </li>
    </ul>
    <ul>
      <li v-for="item in arr2">
        {{item.color}}
      </li>
    </ul>
    <input type="button" @click="add" value="添加颜色">
    <input type="button" @click="remove" value="移除颜色">
  </div>
  <script>
    var app = new Vue({
      el: ‘#app‘,
      data: {
        arr: [‘mike‘, ‘bob‘, ‘tom‘, ‘jack‘],
        arr2: [{ color: ‘red‘ }, { color: ‘blue‘ }, { color: ‘yellow‘ }],
      },
      methods: {
        add: function () {
　　　　　　//添加一个元素
          this.arr2.push({ color: ‘black‘ });
        },
        remove: function () {
　　　　　　//移除左边第一个元素
          this.arr2.shift();
        },
      },

    })
  </script>
</body>

</html>