Vue简明实用教程(07)——v-for指令

最新推荐文章于 2024-01-28 23:27:00 发布

谷哥的小弟

最新推荐文章于 2024-01-28 23:27:00 发布

阅读量1.4k

点赞数 1

分类专栏： Vue简明实用教程文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lfdfhl/article/details/121324083

版权

Vue简明实用教程专栏收录该内容

17 篇文章 53 订阅

订阅专栏

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

v-for指令概述

v-for指令常用于对集合进行遍历。

v-for变量数组语法

v-for="(item,index) in 数组名" v-bind:key="不重复的值"

v-for变量对象数组语法

v-for="(item,index) in 对象数组名"  v-bind:key="不重复的值"

v-for渲染与维护状态

建议尽可能在使用 v-for 时提供key attribute以便维护数据状况并保持其稳定正确。

v-for指令示例

在此，以示例形式详细介绍v-for指令的基本使用。

<!DOCTYPE html>
<!-- 引入v-bind命名空间 -->
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    // 定义数组
                    hobby:["篮球","足球","击剑"],
                    // 定义对象
                    user:{id: 21, name: "zxx", age: 50},
                    // 定义对象数组
                    users:[
                        {id: 21, name: "zxx", age: 50},
                        {id: 22, name: "zxc", age: 51},
                        {id: 23, name: "zcc", age: 52},
                    ]
                },
                methods:{
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
       <!-- 利用v-for遍历数组 -->
       <ul>
           <!-- 利用v-for遍历数组将index作为key属性的值 -->
           <li v-for="(h,index) in hobby" v-bind:key="index">下标：{{index}}；值：{{h}}</li>
       </ul>
       <br/>
       <!-- 利用v-for遍历对象数组 -->
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <!-- 利用v-for遍历对象数组将user.id作为key属性的值 -->
            <tr v-for="(user,index) in users"  v-bind:key="user.id" >
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td><a href="">删除</a> | <a href="">修改</a></td>
            </tr>
        </table>
    </div>
</body>
</html>