v-for指令的使用

1、什么是v-for指令？v-for指令是基于一个数组来重复渲染的元素，通常用于显示列表和表格数据。需要每项提供一个唯一的key属性。v-for指令还可以遍历一个对象的属性，其中v-for指令可以提供第二个参数为property名称(也就是键名)，还可以用第三个参数作为索引。v-for指令渲染列表时，它默认使用“就地更新”。这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态(如表单

代码编编◐

9108人浏览 · 2021-05-30 21:34:40

代码编编◐ · 2021-05-30 21:34:40 发布

1、什么是v-for指令？

（1）v-for指令是基于一个数组来重复渲染的元素，通常用于显示列表和表格数据。需要每项提供一个唯一的key属性。
（2）v-for指令还可以遍历一个对象的属性，其中v-for指令可以提供第二个参数为property名称(也就是键名)，还可以用第三个参数作为索引。
（3）v-for指令渲染列表时，它默认使用“就地更新”。这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态(如表单输入值)的列表渲染输出。
（4）特殊语法：“ item in items ”，【 item：被迭代的数组元素的别名； items：源数据数组】

2、v-for指令的使用

实例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <style>
        #app {
            margin: 20px auto;
            width: 600px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1">
            <caption>{{ title }}</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>斤数</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in itemList" :key="index">
                    <td>{{ index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.num }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var v = new Vue({
            el: "#app",
            data: {
                title: "水果列表",
                itemList: [{
                    name: "苹果",
                    num: "5元/斤"
                }, {
                    name: "香蕉",
                    num: "3元/斤"
                }, {
                    name: "西瓜",
                    num: "1.5元/斤"
                }]
            }
        });
    </script>
</body>

</html>