v-for循环遍历

目录

一、遍历数组

二、遍历对象

三、组件的key属性

四、响应式的数组方法

---

一、遍历数组

        value表示对象的值，key表示对象的属性，index表示对象的下标。

1.遍历数组获取数组里面的元素

<ul>
   <li v-for = "item in names">{{item}}</li>
</ul>

2.遍历数组获取数组下标index

<ul>
  <li v-for = "(item, index) in names">{{index + 1}}.{{item}}</li>
</ul>

二、遍历对象

1.在遍历对象时，如果只获取一个值，那么获取获取到的是value

<ul>
  <li v-for = "item in info">{{item}}</li>
</ul>

2.要获取对象的key和value 格式：(value, key)

<ul>
  <li v-for = "(value, key) in info">{{value}}-{{key}}</li>
</ul>

3.获取对象的key、value、index 格式：(value, key, index)

<ul>
  <li v-for = "(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>

三、组件的key属性

如果我们想在数组['A','B','C','D','E']的B和C之间插入一个F,即['A','B','F','C','D','E']，那么需要绑定key来给每个节点做一个唯一标识。key绑定的值须和渲染的值一至。key的作用主要是为了高效的更新虚拟DOM。

<div id='app'>
    <ul>
      <!-- key绑定的值须和渲染的值一至 -->
      <li v-for = "item in letters" :key = "item">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['A','B','C','D','E']
      }
    })
    // 在B和C之间插入一个F
    app.letters.splice(2, 0, 'F'); // 2：从第2个位置开始，0：截取0个数
  </script>

四、响应式的数组方法

哪些数组方法是响应式的：
1.push(); 在数组末尾添加元素
2.pop(); 在数组末尾删除元素，一次删除一个
3.shift(); 在数组头部删除元素，一次删除一个
4.unshift(); 在数组头部添加元素
5.splice(); 删除/替换/插入元素
6.sort(); 排序
7.reverse(); 翻转数组

  <div id='app'>
    <ul>
      <li v-for = "item in letters">{{item}}</li>
    </ul>
    <button @click = "btnClick">按钮</button>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['A','B','F','C','D','E']
      },
      methods: {
        btnClick() {
          // 1.push(); 在数组末尾添加元素
          this.letters.push('aaa', 'bbb');

          // 2.pop(); 在数组末尾删除元素，一次删除一个
          this.letters.pop();

          // 3.shift(); 在数组头部删除元素，一次删除一个
          this.letters.shift();

          // 4.unshift(); 在数组头部添加元素
          this.letters.unshift('aaa', 'bbb');

          // 5.splice(); 删除/替换/插入元素
          this.letters.splice(1,2); [start, length]
          this.letters.splice(1,2,'m','n'); [start, length]
          this.letters.splice(1,0,'x','z');

          // 6.sort(); 排序
          this.letters.sort();

          // 7.reverse(); 翻转数组
          this.letters.reverse();

          // 注意：通过索引值修改数组中的元素是非响应式的
          // this.letters[0] = 'hhh';
          //正确写法：
          // this.letters.splice(0,1,'bbb') 
          // 或者 vue.set(this.letters,0,'bbb');  set(要修改的对象,索引值,修改后的值)；
        
        }
      }
    })
  </script>

注意：通过索引值修改数组中的元素是非响应式的：this.letters[0]='hhh';
正确写法：
this.letters.splice(0,1,'bbb') 
vue.set(this.letters,0,'bbb');   //  set(要修改的对象,索引值,修改后的值)；