列表渲染v-for

Vue.js 中的列表渲染：v-for 指令详解

最新推荐文章于 2024-07-18 10:37:05 发布

原创最新推荐文章于 2024-07-18 10:37:05 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue基础知识专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue.js中的v-for指令用于列表渲染的方法，包括迭代数组和对象属性的语法及注意事项。对于数组，v-for使用(alias, index) in array的形式，对于对象则为(value, key, index) in Object。注意，遍历对象时不保证属性顺序的一致性。文章来源于梦学谷。" 120052578,7327838,深入理解算法：子串搜索与应用,"['算法', '字符串处理', '编程技术', 'Java']

列表渲染指令

v-for 迭代数组
语法： v-for="(alias, index) in array"
说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)
举例：

<div v-for="item in items" :key="item.id"></div> 
<div v-for="(item, index) in items" :key="item.id"></div>

`items` 是源数据数组， `item` 是数组元素迭代的别名。
 ==注意：使用 `key` 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素==

v-for 迭代对象的属性
语法： v-for="(value, key, index) in Object"
说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选) 。
举例：

<div v-for="value in object" ></div> 
<div v-for="(value, key) in object"></div>
<div v-for="(value, key, index) in object"></div>

注意: 在遍历对象时，是按 Object.keys() 的结果遍历，但不能保证它的结果在不同的 JavaScript 引擎下是顺序一致的。
3. 可用 of 替代 in 作为分隔符.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>1.迭代数组</h3>
        <ul>
            <!-- e 代表的是emps数组的别名，index 数组下标，从0开始 的 
            注意：使用 key 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素	
                可以使用of或者in作为分隔符
        -->
            <li v-for="(e, index) of emps" :key="index">
               编号：{{index+1}}，姓名： {{e.name}} ， 工资 ：{{e.salary}}
            </li>
        </ul>


        <h3>2.迭代对象</h3>
        <ul>
            <!-- value对应是的对象的属性值，key就是对象的属性名，index索引值 -->
            <li v-for="(value, key, index) in person">
                第{{index+1}}个属性为：{{key}} =  {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                emps: [
                    {name: '马云', salary: '20000'},
                    {name: '马化腾', salary: '18000'},
                    {name: '东哥', salary: '13000'}
                ],
                person: {
                    name: '小梦',
                    age: 18
                }
            }
        })
    </script>
</body>
</html>