<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表渲染</title>

</head>

<body>

<!--1.数组迭代-->

<div id="example1">

    <ul>

        <li v-for="item in items">

            {{ item.message }}

        </li>

    </ul>

    <!--第二个参数为索引-->

    <ul>

        <li v-for="(item, index) in items">

            {{ parentMessage }} - {{ index }} - {{ item.message }}

        </li>

    </ul>

</div>

<!--2.对象迭代-->

<div id="example2">

    <!--第一个参数为属性值-->

    <ul>

        <li v-for="value in object">

            {{ value }}

        </li>

    </ul>

    <!--第二个参数为键名-->

    <ul>

        <li v-for="(value, key) in object">

            {{ key }}: {{ value }}

        </li>

    </ul>

    <!--第三个参数为索引-->

    <ul>

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

            {{ index }}.{{ key }}: {{ value }}

        </li>

    </ul>

</div>

<!--3.在使用 v-for 时提供 key-->

<!--2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的-->

<div id="example3">

    <ul>

        <li v-for="item in items" :key="item.id">

            {{ item.message }}

        </li>

    </ul>

</div>

<script type="text/javascript" src="vue.min.js"></script>

<script>

    let vm1 = new Vue({

        el: '#example1',

        data: {

            parentMessage: 'Parent',

            items: [

                {message: 'Foo'},

                {message: 'Bar'}

            ]

        }

    });

    let vm2 = new Vue({

        el: '#example2',

        data: {

            object: {

                firstName: 'John',

                lastName: 'Doe',

                age: 30

            }

        }

    });

    let vm3 = new Vue({

        el: '#example3',

        data: {

            items: [

                {

                    id: 1,

                    message: 'Foo'

                },

                {

                    id: 2,

                    message: 'Bar'

                }

            ]

        }

    })

</script>

</body>

</html>

Vue学习（五）：列表渲染的更多相关文章

  1. Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）

    文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...

  2. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  3. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  4. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  5. vue学习(五) 访问vue内部元素或者方法

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  6. Vue学习之--------列表排序（ffilter、sort、indexOf方法的使用）、Vue检测数据变化的原理（2022/7/15）

    文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...

  7. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  8. vue学习五之VueCLi

    概念 通俗的说,Vue CLI是我们创建大型项目时的脚手架,所谓脚手架,就是帮助我们建设好了建造大厦的所需模板,建设者只需往模板里面填入实质内容,即可完成大厦的建设,对于程序开发来说,脚手架使程序员只 ...

  9. 23.VUE学习之-列表的排序sort

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue 学习五 深入了解components（父子组件之间的传值）

    上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...

随机推荐

  1. [18/12/03] 多态(polymorphism)和对象的转型(casting)

    一.多态 多态指的是同一个方法调用,由于对象不同可能会有不同的行为.现实生活中,同一个方法,具体实现会完全不同. 比如:同样是调用人的“休息”方法,张三是睡觉,李四是旅游,同样是调用人“吃饭”的方法, ...

  2. 整个ssd的网络和multibox_loss_layer

    总结说来prior_box层只完成了一个提取anchor的过程,其他与gt的match,筛选正负样本比例都是在multibox_loss_layer完成的 http://www.360doc.com/ ...

  3. QS：vue中qs的使用

    关于Vue中,序列化字符串,处理发送请求的参数 使用工具qs来处理参数 步骤: 1.首先先下载: npm i qs 2.然后引入 : import qs from 'qs' 3.qs主要有两个方法 : ...

  4. vue中a的href写法

    注意点:href前面要加“:”或者v-bind: 2.字符串要用单引号“ ’ ”包住 加上了冒号是为了动态绑定数据,等号后面可以写变量. 如果不使用冒号,等号后面就可以写字符串等原始类型数据.这是就无 ...

  5. 【洛谷P2216】[HAOI2007]理想的正方形

    理想的正方形 [题目描述] 一个a*b的矩阵,从中取一个n*n的子矩阵,使所选矩阵中的最大数与最小数的差最小. 思路: 二维的滑动窗口 对于每行:用一个单调队列维护,算出每个长度为n的区间的最大值和最 ...

  6. 【luogu P3398 仓鼠找sugar】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3398 辣鸡树剖1300ms 倍增大法吼啊 #include <cstdio> #include ...

  7. An error occurred during the installation of assembly 'Microsoft.VC90.ATL or 'Microsoft.VC80.ATL'

    An error occurred during the installation of assembly 'Microsoft.VC90.ATL or 'Microsoft.VC80.ATL' 下载 ...

  8. <head> 中的 JavaScript 函数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. CSS选择器种类及使用方法

    css选择器 有通配符选择器书写格式:*+{声名块} 并集选择器/组合选择器 书写格式;元素或类或id+""+元素或类或id+","+元素或类或id{声明块} ...

  10. Vue nodejs商城项目-商品列表页面组件

    data(){        return {            goodsList:[], // 商品列表            priceFilter:[ // 价格区间数组          ...