vuejs之v-for

Posted 2020-11-25 西西嘛呦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs之v-for相关的知识，希望对你有一定的参考价值。

看一个例子：

<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>