循环遍历 - 码农教程

v-for遍历数组(以及对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in names">{{item}}-{{index+1}}</li>
    </ul>
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>

    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index+1}}</li>
    <br>
    <li v-for="value in info">{{value}}</li>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['詹姆斯', '库里', '浓眉哥'],
            info: {
                name: 'job',
                age: 18,
                height: 1.88
            }
        }
    })
</script>
</body>
</html>

v-for绑定key与不绑定的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <!--绑定key要一致-->
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    /*
    app.letters.splice(2,2)
    ["C", "D"]
    app.letters.splice(2, 0, 'E')
    */
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['A', 'B', 'C', 'D', 'E']
        }
    })
</script>
</body>
</html>

diff算法　

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            letters: ['a', 'c', 'b', 'e', 'd']
        },
        methods: {
            btnClick() {
                // 一.响应式方法
                // 1.数组的push方法 在数组的最后添加
                // this.letters.push('x');
                // this.letters.push('x', 'y');

                // 2.数组的pop方法  在数组的最后删除并可以获取到
                // v = this.letters.pop();
                // console.log(v);

                // 3.数组的shift方法 在数组的第0个位置删除并获取到
                // v = this.letters.shift();
                // console.log(v);

                // 4.数组的unshift方法 在数组的第0位置开始添加
                // this.letters.unshift('x', 'y', 'z');

                // 5.数组的splice方法  删除元素, 替换元素, 插入元素
                // 一个参数就是把之后的元素全部删除
                // this.letters.splice(1);
                // 两个参数就是把索引后的元素(之后的几个元素)删除掉
                // this.letters.splice(1, 2);
                // 三个参数表示在索引后的三个位置上的值分别修改为xyz
                // this.letters.splice(1, 3, 'x', 'y', 'z');
                // 第二个参数为0 表示索引1后边的值增加xyz
                // this.letters.splice(1, 0, 'x', 'y', 'z')

                // 6.数组的sort方法
                // this.letters.sort();

                // 7.数组的reverse方法
                // this.letters.reverse();


                // 二.非响应式 修改之后页面不能立即显示出来  MVVM不能体现出来  Vue在这点没帮我们做 要想显示出来就自己实现
                // this.letters[0] = 'cccc';
                this.letters.splice(0, 1, 'ccc');

                /*
                app.letters
                (5) ["cccc", "c", "b", "e", "d", __ob__: Observer]
                */
            }
        }

    });

    function sum(... num) {
        console.log(num);
    }
    sum(10, 20, 30, 40)
</script>
</body>
</html>

案例点击谁谁变红色(默认第一个变红色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in books" :class="{active:currentIndex===index}" @click="liClick(index)">{{item}}-{{index+1}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: ['linux基础', 'Python异步编程', 'Django', 'Vue', 'Flask', 'Tornado'],
            currentIndex: 0,
        },
        methods: {
            liClick(index){
                this.currentIndex = index;
            }
        }
    })
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/Alexephor/p/11734279.html