Vue循环遍历：v-for 指令

news2024/11/24 11:54:54

1、v-for 指令

在程序设计中，循环控制是变化最丰富的技术。Vue.js 提供了列表渲染的功能，可将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中，列表渲染使用的是 v-for 指令，其效果类似于 JavaScript 中的遍历。语法格式如下：

<ul>
    <li v-for="item in userList" :key="item.userId">{{item.userName}}</li>
</ul>

在应用 v-for 指令变量数组时，还可以指定一个参数作为当前数组元素的索引。语法格式如下：

<ul>
    <li v-for="(item,index) in userList" :key="index">{{index}} - {{item.userName}}</li>
</ul>

2、key 属性

使用 v-for 指令渲染的元素列表在更新时，如果数据项的顺序被改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素。为了是 Vue 能够跟踪每个 DOM 元素，需要为每一个数据项提供一个唯一的 key 属性。

注意：

从 Vue 2.2.0 版本开始，当在组件中使用 v-for 指令时，必须有 key 属性。

3、综合实例

【实例】使用 v-for 指令，循环遍历用户列表信息。执行结果如下图：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>v-for指令</title>

    <!-- 设置CSS样式 -->
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        table,
        table tr th,
        table tr td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>序号</th>
                <th>用户编号</th>
                <th>用户名称</th>
                <th>博客信息</th>
            </tr>
            <tr v-for="(item,index) in userList" :key="item.userId">
                <td>{{index+1}}</td>
                <td>{{item.userId}}</td>
                <td>{{item.userName}}</td>
                <td>{{item.blogInfo}}</td>
            </tr>
        </table>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                userList: [
                    {
                        userId: 'A001',
                        userName: 'pan_junbiao的博客',
                        blogInfo: '您好，欢迎访问 pan_junbiao的博客'
                    },
                    {
                        userId: 'B002',
                        userName: 'pan_junbiao的博客',
                        blogInfo: 'https://blog.csdn.net/pan_junbiao'
                    },
                    {
                        userId: 'C003',
                        userName: 'pan_junbiao的博客',
                        blogInfo: '您好，欢迎访问 pan_junbiao的博客'
                    },
                    {
                        userId: 'D004',
                        userName: 'pan_junbiao的博客',
                        blogInfo: 'https://blog.csdn.net/pan_junbiao'
                    }
                ]
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2061791.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！