Vue——09——v-for和key指令

遍历普通数组

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <!-- 对象就是无序键值对的集合   属性有杠-就必须要加单引号,这是属性里键的规定-->
    <div id="app">
        <p v-for="(item,i) in list">索引值:{{i}}---每一项:{{item}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list:[1,2,3,4,5,6],
            },
            methods: {

            }
        })
    </script>
</body>

</html>

遍历对象数组

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <!-- 对象就是无序键值对的集合   属性有杠-就必须要加单引号,这是属性里键的规定-->
    <div id="app">
        <p v-for="(user,i) in list">索引值:{{i}}---ID:{{user.id}}---name:{{user.name}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list:[
                    {id:1,name:'ajax'},
                    {id:2,name:'json'},
                    {id:3,name:'html'},
                    {id:4,name:'vue'},
                    {id:5,name:'html'}
                ]
            },
            methods: {

            }
        })
    </script>
</body>

</html>

遍历对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <!-- 在遍历对象身上的键值对的时候,除了有val key,在第三个位置还有一个索引-->
    <div id="app">
        <p v-for="(val,key,i) in list">值:{{val}}---键:{{key}}---id:{{i}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list:{
                    name:"马云",
                    age:18,
                    class:1,

                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>

迭代数字

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <!-- in后面还可以放数字,代表循环多少次  如果使用v-for迭代数字,前面的count从1开始 -->
    <div id="app">
        <p v-for="(count) in 10">这是第{{count}}次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            
            },
            methods: {

            }
        })
    </script>
</body>

</html>

key的用法

因为vue中它默认使用“就地更新”的策略,最少化的渲染。此时为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <!-- v-for循环的时候,key属性只能使用number或string-->
    <!-- key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值 -->
<!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型:key值 -->

    <div id="app">
        id:<input type="text" v-model="id">
        name:<input type="text" v-model="name">
        <input type="button" value="添加" @click="add">
        <!--给每个都指定一个key key等于一个唯一标识符 不能用对象item,只能用number获取-->
        <p v-for="item in list" v-bind:key="item.id">
            <input type="checkbox">
            id:{{item.id}}---名字:{{item.name}}</p>
    </div>
    <!-- <script> -->
    var vm = new Vue({
    el: "#app",
    data: {
    id:'',
    name:'',
    list:[
    {id:1,name:'李斯'},
    {id:2,name:'赵高'},
    {id:3,name:'秦始皇'},
    {id:4,name:'李白'},
    {id:5,name:'赵飞'},
    ]
    },
    methods: {
    add(){
    this.list.unshift({id:this.id,name:this.name})
    }
    }
    })
    </script>
</body>

</html>

热门文章

暂无图片
编程学习 ·

【面试】如果你这样回答“什么是线程安全”,面试官都会对你刮目相看

不是线程的安全 面试官问:“什么是线程安全”,如果你不能很好的回答,那就请往下看吧。 论语中有句话叫“学而优则仕”,相信很多人都觉得是“学习好了可以做官”。然而,这样理解却是错的。切记望文生义。 同理,“线程安全”也不是指线程的安全,而是指内存的安全。为什么如…
暂无图片
编程学习 ·

RabbitMQ 教程

RabbitMQ 教程 文章目录RabbitMQ 教程消息中间件安装及管理windows安装:RabbitMQLinux安装Mac安装基本概念主要概念Exchange的类型RabbitMQ的工作模式及代码示例简单模式 Simple2.工作模式 work (资源竞争消费)3.发布订阅 publish/subscribe (广播)4.路由 routing5.主题订阅…
暂无图片
编程学习 ·

安装Ubuntu系统时遇见的问题:

安装双系统,在已有win10的基础上安装Ubuntu18.04相关设备:1)Rufus 3.112) Ubuntu18.04.4的镜像文件通过使用rufus来制作U盘启动器,因为网上有详细教程就不介绍了。由于之前有多次安装Ubuntu的经历,磁盘分区比较乱,以及因为在之后的选择安装里如果卸载之前安装的Ubuntu就不…
暂无图片
编程学习 ·

2020李宏毅学习笔记——33.Network Compression(2_6)

3.为什么要pruning? 首先有一个问题:既然最后要得到一个小的network,那为什么不直接在数据集上训练小(有local minima的问题)的模型,而是先训练大模型?解释一:模型越大,越容易在数据集上找到一个局部最优解,而小模型比较难训练,有时甚至无法收敛。 解释二:2018年的…
暂无图片
编程学习 ·

前端学习-javascript-(1)预览

组成 DOM—Document Object Model 文档对象模型—操作返回到文档(界面) doucument对象 ———————————————— BOM—Browser Object Model 浏览器对象模型—操作浏览器本身 window对象 ———————————————— ECMAScript 解释器 ———————————…
暂无图片
编程学习 ·

docker常用简单命令

检查内核版本 uname -r 如果内核版本小于3.10执行 yum update 安装docker yum install docker 启动docker systemctl start docker 查看docker版本 docker -v 开机自启动docder systemctl enable docker 停止docker systemctl stop docker ///////////////////////////////////…
暂无图片
编程学习 ·

中国互联网热衷造轮子!去哪儿网开源消息中间件QMQ,京东也搞JMQ

中国互联网热衷于“造轮子“!在Github上查看消息队列的时候,那个专栏就透露:京东已推出自己的消息队列产品 JMQ,并且将很快开源问世!之后,我很少留意过 JMQ 的消息。今天偶然之间,看到去哪儿网也搞了一个消息中间件 QMQ。根据去哪网的开发团队透露,QMQ 内部已经使用了 …
暂无图片
编程学习 ·

创新实训

2020暑期实训 2020-05-30 规划和写申请文档 2020-06-01 完善申请书和进行签名 2020-06-14 开会并配置环境,如何运行 项目文件列表如何运行 cmke . source /home/asc/intel/compilers_and_libraries/linux/bin/compilervars.sh make其中第二句是声明intel icpc 和 intel icc 编…
暂无图片
编程学习 ·

IntelliJ IDEA全局内容搜索和替换

使用IDEA过程中,有时会在整个项目里或指定文件夹下进行全局搜索和替换,这是一个很方便功能。使用方法如下: 一、全局搜索 1、使用快捷键Ctrl+Shift+F打开搜索窗口,或者通过点击Edit–>Find–>Find in path打开搜索窗口2、搜索界面如下,主要分为上中下三部分,上部主…
暂无图片
编程学习 ·

MySQL在dos命令行中输入中文时报错

情景:在DOS命令行中操作中文时报错 insert into category(cid,cname) values(c010,中文); ERROR 1366 (HY000): Incorrect string value:\xB7\xFE\XD7\xB0 for colum cname at row 1原因:mysql的客户端设置编码是utf8,而系统的cmd窗口编码是gbk 解决:查看mysql内部设置的编…
暂无图片
编程学习 ·

RocketMQ消费者之消息消费过程分析

心跳机制在Consumer启动后,它就会通过定时任务不断地向RocketMQ集群中的所有Broker实例发送心跳包心跳包内容包含了消息消费分组名称订阅关系集合消息通信模式客户端id的值Broker端在收到Consumer的心跳消息后,会将它维护在ConsumerManager的本地缓存变量—consumerTable,同…
暂无图片
编程学习 ·

Arcgis api for Javascript + arcgisServer + arcSDE笔记(1)

最近要搞的项目要用Arcgis api for Javascript做地图模块,自己开始学相关的技术。这是之前整理的笔记,现在传到博客上,也作为学习的记录0 环境搭建Arcgis软件统一使用10.2版本(更新的版本很难找到比较齐全的server、sde等配套软件),安装arcgis Desktop、arcgis Server、a…
暂无图片
编程学习 ·

4.4.1 SpringCloud遇到的坑和实践案例

云课堂的总体架构云课堂Eureka的实践云课堂Ribbon中的实践云课堂Fegin中的实践云课堂Hystrix中的实现云课堂中Zuul中的实践SpringCloud在网易的实践 微服务的概念 一个真正的微服务具备的特性:可组合性 把springboot进行一个随意的组装会形成一个新的系统 每一个服务都是围绕自…
暂无图片
编程学习 ·

材料力学与弹性力学中讲到的 扭转

材料力学圆轴扭转、非圆截面扭转、开口薄壁杆件扭转、闭口薄壁杆件扭转 圆轴的塑性扭转1.非圆截面扭转矩形梁进行扭转,边缘处有最大切应力。在边缘上,最大切应力位于长边的中点处。 短边处的最大切应力τ1与长边处的最大切应力τ2都位于他们的中点处,但后者大于前者。 当h/b…
暂无图片
编程学习 ·

call apply bind 改变this 指向问题

call方法function info(name, age) {this.name = name;this.age = age;}function people(name, age, work) {info.call(this, name, age);console.log("他叫" + this.name + "," + this.age + "岁,职业是" + work)}people("Li", 21, &…
暂无图片
编程学习 ·

CSR8675模组,支持蓝牙APTX

FSC-BT806采用最新的蓝牙5.0解决方案,具有多功能CSR8670或CSR 8675芯片组,可通过BR/EDR和蓝牙低功耗连接在音频设备之间无线传输音频数据。确保用户有更多可能集成他们的设计,主要适用于无线立体声耳机和扬声器,免提耳机,TrueWireless立体声设备,汽车信息娱乐系统,对讲音…
暂无图片
编程学习 ·

求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1、10、11、12、13因此共出现6次,但是对于后面问题他就没辙了。ACMer

求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1、10、11、12、13因此共出现6次,但是对于后面问题他就没辙了。ACMer希望你们帮帮他,并把问题更加普遍化,可以很快的求出任意非负整数区间中1出现的次数(从1 到 n 中1出…