vue for循环和绑定key

2020年12月23日 0条评论 469次阅读 0人点赞

原理和介绍

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

for循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

<!--循环列表-->
  <!-- 1. 在遍历的过程中,没有使用索引值(下标值)-->
  <ul>
    <li v-for="item in devOpsList" :key=item>{{item}}</li>
  </ul>

  <!-- 2. 在遍历的过程中, 获取索引值, index默认从0开始, +1则从1开始展示-->
  <ul>
    <li v-for="(item, index) in devOpsList" :key=item>{{index + 1}} {{item}}</li>
  </ul>


<!--循环字典对象  -->
<!-- 1. 只获取value-->
  <ul>
    <li v-for="item in dict" :key=item>{{item}}</li>
  </ul>

<!-- 2. 获取key和value, 格式为: (value, key), value在前面-->
  <ul>
    <li v-for="(value, key) in dict" :key=key>{{key}}: {{value}}</li>
  </ul>

<!-- 3. 获取key和value和index, 格式为: (value, key, index), value在前面, index默认从0开始, +1则从1开始展示-->
  <ul>
    <li v-for="(value, key, index) in dict" :key=key>{{index + 1}} {{key}}: {{value}}</li>
  </ul>
</div>

<script src="../js/vue.v2.6.12.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      devOpsList: ['linux', 'python', 'kubernetes', 'prometheus'],
      dict: {
        name: 'baiyongjie',
        age: 25,
        city: '河北省张家口市',
        blog: 'www.baiyongjie.com'
      }
    }
  })
</script>
</body>
</html>

为什么绑定:key

-官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
-为什么需要这个key属性呢（了解）？
– 这个其实和Vue的虚拟DOM的Diff算法有关系。
– 这里我们借用React’s diff algorithm中的一张图来简单说明一下：
– 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
– 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
– 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
– 所以我们需要使用key来给每个节点做一个唯一标识
– Diff算法就可以正确的识别此节点
– 找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM。

《vue for循环和绑定key》

案例: 被点击元素改为红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .active {
          color: red;
      }
  </style>
</head>
<body>
<!-- 案例: 循环列表, 默认第一个元素为红色, 点击其他元素时, 被点击元素变为红色 -->
<h2>试验案例</h2>
<div id="app2">
  <ul>
    <!--动态绑定class, 当选择index和预设的currentIndex相等时,添加active类,监听鼠标点击事件, 传递下标给到liClick方法 -->
    <li v-for="(item, index) in movies"
        :class="{active: currentIndex === index}"
        @click="liClick(index)">
      {{index}}.{{item}}
    </li>

    <!--<li :class="{active: 0===currentIndex}"></li>-->
    <!--<li :class="{active: 1===currentIndex}"></li>-->
    <!--<li :class="{active: 2===currentIndex}"></li>-->
    <!--<li :class="{active: 3===currentIndex}"></li>-->
  </ul>
</div>

<script src="../js/vue.v2.6.12.js"></script>
<script>
  const app2 = new Vue({
    el: '#app2',
    data: {
      movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
      currentIndex: 0
    },
    methods: {
      liClick(index) {
        this.currentIndex = index
      }
    }
  })
</script>
</body>
</html>