07循环遍历

循环遍历

当我们有一组数据需 要进行渲染时,我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。
格式如下: item in items的形式。

<div id="app">
  <!-- 1.在遍历的过程中，没有使用索引值（下标值） -->
  <ul>
    <li v-for='item in names'>{{item}}</li>
  </ul>

  <!-- 2.在遍历过程中,获取索引值 -->
  <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>
</div>

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        names: ['why', 'who', 'what', 'where']	//遍历数组
      },
      info: {									//遍历对象
        name: 'lyc',
        age: 18,
        height: 1.88
      }
    })
  </script>
</body>

v-for加key属性

为什么需要这个key属性呢(了解) ?
这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React' S diff algorithm中的一张图来简单说明一下:

当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一一个新
的节点
我们希望可以在B和C之间加一一个F , Diff算法默认执行起来是这样的。
即把C更新成F , D更新成C , E更新成D ,最后再插入E ,是不是很没有
效率?

所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点

0找到正确的位置区插入新的节点。

所以一句话, key的作用主要是为了高效的更新虚拟DOM。
avatar
avatar

哪些数组方法是响应式的?

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['A', 'C', 'B', '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('ddd','ddd');

          // 5.splice()   删除/插入/替换元素
          // 删除元素: 第一参数传入你从第几个元素开始删除，第二参数传入你要删除的几个元素(如果没有传,就删除后面所有元素)
          // 插入元素: 第二个传入0，后面跟上要添加的值
          // 替换元素: 第二参数传入你要删除元素，后面追加你要写入的元素完成替换
          this.letters.splice(1,3,'m','n','l')

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

          // 7.reverse()  反转
          this.letters.reverse()

          // 注意：通过索引值直接来修改数组中的元素 不是响应式
          // this.letters[0]='bbbbbbbbbbbb'
          // set(要修改的对象，索引值，修改后的值)
          Vue.set(this.letters,0,'bbbbbb')
        }
      }
    })

    // 扩展知识：可变参数
    // function sum(...sum){
    //   console.log(sum);
    // }
    // sum(11,223,44,56,77,889,9,1)
  </script>
</body>
posted @ 2021-11-08 22:49  天亮說晚安  阅读(43)  评论(0)    收藏  举报