07-循环遍历

李先生 2020年12月16日 84次浏览

循环遍历

遍历数组

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <li v-for='item in arr'>{{item}}</li>
        <br>
        <li v-for="(item,index) in arr">{{index+1}} {{item}}</li>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               arr:[
                   '张三',
                   '李四',
                   '王五',
                   '袁六'
               ]
           },
           methods:{}
        });
    </script>
</body>

</html>

遍历对象

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <li v-for="item in info">{{item}}</li>
        <br>
        <li v-for="(value,key) in info">{{key}}--{{value}}</li>
        <br>
        <li v-for="(value,key,index) in info">{{index}}--{{key}}--{{value}}</li>
        
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               info:{
                   name:"张三",
                   age:18,
                   sex:"男",
               }
           },
           methods:{}
        });
    </script>
</body>

</html>

ps:组件的key属性

官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性

  • 为什么需要这个key呢?

    • 这个其实和vue的虚拟DOM的diff算法有关系
    • 这里我们借用React's fiff algorithm中的一张图来说明一下:
  • 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点

    • 我们想可以在B和C之间加一个F,diff算法默认执行起来是把C更新成F,D更新成C,E更新成D,最后再插入一个F,这样是不是很没有效率
  • 所以我们需要使用key来给每个节点做一个唯一标识

    • diff算法就可以正确的识别此节点
    • 找到正确的位置区插入新的节点
  • 所以一句话,key的作用主要是为了高效的更新DOM

    image-20201216105829731 image-20201216105829731
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 性能较低 -->
        <li v-for='item in arr'>{{item}}</li>
        <br>
        <!-- 性能较高 -->
        <li v-for='item in arr' :key="item">{{item}}</li>    
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               arr:[
                   'A',
                   'B',
                   'C',
                   'D',
                   'E'
               ]
           },
           methods:{}
        });
    </script>
</body>

</html>

数组的那些方法是响应式的

当我们数组数据发生改变的时候,我们发现我们的页面跟着改变了,这是为什么呢?

  • 因为我们的数据是响应式的
    数组响应式的方法有:
    • push()
    • pop()
    • shift() 删除数组中的第一个元素
    • unshift() 在数组最前面添加元素
    • splice(start,) 在数组中间删除或插入元素
    • sort() 排序
    • reverse() 数组反转
  • 注意:
    • 通过索引值修改数组中的元素不是响应式的
    • 上述需要使用splice方法
    • 也可以使用set方法 Vue.set(要修改的对象,索引值,修改后的值)
    • Vue.set(this.arr,0,'aaa')
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <li v-for='item in arr'>{{item}}</li>
        <button @click="btnClick">按钮</button>    
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               arr:[
                   'A',
                   'B',
                   'C',
                   'D',
                   'E'
               ]
           },
           methods:{
               btnClick(){
                // 1. push方法 响应式
                // this.arr.push('AAA','BBB');

                // 注意:2不是响应式的
                // 2. 通过索引值修改数组中的元素 
                // this.arr[0] = 'bbb';

                // 3. pop方法 删除数组中的最后一个元素
                // this.arr.pop();

                // // 4. shift() 删除数组中的第一个元素
                // this.arr.shift();

                // // 5. unshift() 在数组最前面添加元素
                // this.arr.unshift('aaa','bbb');

                // 6. splice(start,) 在数组中间删除或插入元素
                // start:操作开始的位置
                // 第二个参数: 如果要删除元素,则第二个参数表示要删除元素的个数 如果不传参数的话,则从start删除到最后一个
                // 第二个参数如果为0则不删除元素
                // 第三个及之后的参数:将这些插入到start
                // this.arr.splice(1,0,'a','b')

                // 7. sort() 排序
                // this.arr.sort()

                // 8. reverse() 反转
                this.arr.reverse()
               }
           }
           
        });
    </script>
</body>

</html>