Mr.J--Vue之v-for全解析
多次显示数据
<p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p>上面这一种是最不好，也是几乎没人用的一种循环方式，它就不是循环（滑稽.jpg）
v-for
先只写Html里面的渲染，数据在后面展示
实现普通数组循环
<p v-for="item in list1">{{item}}</p><!-- 普通数组 --><p v-for="(item,i) in list1">数组数据 ： {{item}} --- 索引值: {{i}}</p>实现对象数组循环
<p v-for="item in list2">{{item}}</p><p v-for="item in list2">{{item.id}} --- {{item.name}}</p><p v-for="(item,i) in list2">{{item.id}} --- {{item.name}} --- {{i}}</p>实现对象循环
<p v-for="(val,key,i) in user">{{val}} --- {{key}} --- {{i}}</p>数字迭代
<p v-for="count in 5">这是{{count}}第次循环</p>v-for:Key值
<div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- v-for 循环时 key 属性只能使用 number获取 string 2. 必须使用v-bind进行属性绑定，指定key的值保证数据的唯一性 --><p v-for="item in Obj" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p>使用key值：
数据会进行绑定
未使用key值 同样开始选择的是2-pou
数据没有进行绑定，而是根据所在位置进行抉择
完整源码
<!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>
<style>[v-cloak] {display: none;}
</style>
<script src="./jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js"></script><body><div id="app" v-cloak><!-- <p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p> --><div class="col-md-4" style="border:greenyellow 2px solid;width: 200px;height:500px;margin:auto"><h3>普通数组: </h3><br><p v-for="item in list1">{{item}}</p><!-- 普通数组 --><p v-for="(item,i) in list1">数组数据 ： {{item}} --- 索引值: {{i}}</p></div><!-- 对象数组 --><div class="col-md-4" style="border:aqua 2px solid;width: 200px;height: 420px"><h3>对象数组:</h3><p v-for="item in list2">{{item}}</p><p v-for="item in list2">{{item.id}} --- {{item.name}}</p><p v-for="(item,i) in list2">{{item.id}} --- {{item.name}} --- {{i}}</p></div><br><div class="col-md-4" style="border:hotpink 2px solid;width: 200px;height: 200px"><h3>循环输出对象:</h3><!-- 循环输出对象 --><!-- 数据 键值 索引值 --><p v-for="(val,key,i) in user">{{val}} --- {{key}} --- {{i}}</p></div><div class="col-md-4" style="border:rgb(22, 197, 74) 2px solid;width: 200px;height: 200px"><!-- 注意：v-for 迭代数字，值从1开始 不是0 --><!-- in 后面 普通数组 对象数组 对象 数字 --><p v-for="count in 5">这是{{count}}第次循环</p></div><!-- key属性使用 --><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- v-for 循环时 key 属性只能使用 number获取 string 2. 必须使用v-bind进行属性绑定，指定key的值保证数据的唯一性 --><p v-for="item in Obj" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div>
</body>
<script src="./vue.js"></script>
<script>var vm = new Vue({el: "#app",data: {id:'',name:'',//普通数组list1: [1, 2, 3, 4, 5, 6, 8],//对象数组list2: [{ id: 1, name: 'jack' },{ id: 2, name: 'young' },{ id: 3, name: 'jar' },{ id: 4, name: 'josn' }],//对象user: {id: 1,name: 'Tony Stark',sex: 'man'},//keyObj: [{ id: 1, name: 'pop' },{ id: 2, name: 'pou' },{ id: 3, name: 'bunk' },{ id: 4, name: 'kery' }]},methods: {add(){// this.Obj.push({id:this.id,name:this.name})this.Obj.unshift({id:this.id,name:this.name})}}})
</script></html>Mr.J--Vue之v-for全解析相关推荐
- Vision Transformer（ViT）PyTorch代码全解析（附图解）
Vision Transformer(ViT)PyTorch代码全解析 最近CV领域的Vision Transformer将在NLP领域的Transormer结果借鉴过来,屠杀了各大CV榜单.本文将根 ...
- 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 并基于前端进阶 ...
- 前端面试题精编2020（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 并基于前端进阶 ...
- 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）...
写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买. 一次购买永久可看,文档长期更新! 有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程 ...
- 史上最全的集合框架讲解 ----- Java 集合框架（3）---- Map 相关类最全解析
引言 好了,步入正题,上篇文章Java 集合框架(2)---- List 相关类解析中我们一起看了一下 List 接口的相关具体类(ArrayList.LinkedList-.),这篇开始我们开始探索 ...
- Oracle AWR报告指标全解析-11011552
1-5 Top 5 Timed Events Waits : 该等待事件发生的次数, 对于DB CPU此项不可用 Times : 该等待事件消耗的总计时间,单位为秒, 对于DB CPU 而言是前台进程 ...
- Oracle AWR报告指标全解析
1-5 Top 5 Timed Events Waits : 该等待事件发生的次数, 对于DB CPU此项不可用 Times : 该等待事件消耗的总计时间,单位为秒, 对于DB CPU 而言是前台进程 ...
- 【性能调优】Oracle AWR报告指标全解析
[性能调优]Oracle AWR报告指标全解析 啥是AWR? ===================================================================== ...
- Python 常见的 170 道面试题全解析：2022 版
Python 常见的 170 道面试题全解析:2019 版 语言特性 1.谈谈对 Python 和其他语言的区别 答:Python 是一门语法简洁优美,功能强大无比,应用领域非常广泛,具有强大完备的第 ...
- 6.15 Unity引擎渲染效率全解析
UWA新晋主播赵福恺从Unity渲染模块中的各种渲染效果性能.PBR渲染性能以及阴影的渲染性能三个角度分别进行了详细的分析总结.为响应各大听众的需求,小编奉上完整视频回顾,同时也向看完直播才下班的五好 ...
最新文章
- 人工智能时代：互联网推动制造业升级的四大方向
- php array_multisort对数据库结果多个字段进行排序
- vscode新建html，没有模板
- 使用 webpack 4 和 Babel 构建 React 应用(2018)
- CSS 锦囊[收藏]
- linux sed举例,sed 常用命令与参数，带举例：时时更新!
- 汇编指令mrs_专题1：电子工程师 之 软件】 之 【8.arm指令】
- 交换机的VLAN与Trunk配置
- linux怎么添加DSL,如何在redhat上进行DSL 拨号
- Stata：机制检验，如何判断是不是遮掩效应？
- Python得到字符的阿斯克码值 chr ord
- 13到21年蓝桥杯真题及解析
- 可视化远程管理系统保障工地施工安全解决方案
- 转：原来可以这样出书、写书？
- gpd微型计算机,对便携性的终极追求，GPD P2 MAX迷你轻薄本
- 距离模糊与多普勒模糊
- 西门子 PLC S7单边通信
- 1004 Let the Balloon Rise
- Javascript基本内容
- Threejs使用LOD根据摄像机距离物体的距离显示不同的物体