vue for循环_复习之v-for指令（列表渲染指令）

引入vue.js

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

作用：基于数据多次渲染元素。

如何使用v-for指令？

1.在v-for中使用数组

list：data中的源数据数组，

item：data数据list数组的别名，

index：list数组索引

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <li v-for="(item, index) in list">
                {{ index }}---{{ item.name }}---{{ item.age }}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                list: [{
                        name: 'li',
                        age: 18
                    },
                    {
                        name: 'liu',
                        age: 20
                    },
                    {
                        name: 'wang',
                        age: 22
                    },
                    {
                        name: 'deng',
                        age: 88
                    },
                ]
            }
        })
    </script>

2.在v-for中使用对象

li：data中的源数据对象，

value: 对象值，

key：键名，对象名，

index：li对象索引

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <li v-for="(value, key, index) in li">
                {{ index }}---{{ key }}---{{ value }}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                li: {
                    name: 'li',
                    age: 20,
                    height: '160cm',
                    width: '86kg'
                }
            }
        })
    </script>

3.在v-for中使用数字

num：data中的源数据数字，

n：从1开始

index：num数字索引

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <li v-for="(n, index) in num">
                {{ index }}---{{ n }}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                num: 10
            }
        })
    </script>

4.在v-for中使用字符串

string：data中的源数据字符串，

str：data数据string字符串的每一个，

index：string字符串索引

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <li v-for="(str, index) in string">
                {{ index }}---{{ str }}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                string: 'abcdefgh'
            }
        })
    </script>

使用v-for循环一段包含多个元素的内容

需要利用template元素，如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <template v-for="item in li">
                <li>{{ item.name }}</li>
                <span>{{ item.age }}</span>
            </template>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                li: [
                { name: 'li', age: 18 },
                { name: 'liu', age: 20 },
                { name: 'wang', age: 22 },
                { name: 'deng', age: 88 },]
            }
        })
    </script>

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

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <ul>
            <template v-for="item of li">
                <li>{{ item.name }}</li>
                <span>{{ item.age }}</span>
            </template>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                // 存放所需要的数据
                li: [
                { name: 'li', age: 18 },
                { name: 'liu', age: 20 },
                { name: 'wang', age: 22 },
                { name: 'deng', age: 88 },]
            }
        })
    </script>