第二章 Vue 核心技术之1.6列表渲染

列表渲染 v-for

1. 列表渲染指令

  1. 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>  123`items` 是源数据数组， `item` 是数组元素迭代的别名。  
注意：使用 `key` 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素
  1. v-for 迭代对象的属性

  • 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 引擎下

    是顺序一致的。

  1. 可用 of 替代 in 作为分隔符

2.案例源码

<!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 不存在的元素	
        -->
            <li v-for="(e, index) of emps" :key="index">  
                <!-- in 和 of 作为关键字效果相同 -->
               编号：{{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>

效果图

posted @ 2020-09-23 22:48  xiaokai9527  阅读(60)  评论(0)    收藏  举报