vue-05列表渲染自学视频教程
{ {item}} mumu-0-18 zql-0-22 曾庆林-0-28 { {item}}
发布日期:2021-06-29 17:32:46
浏览次数:2
分类:技术文章
本文共 750 字,大约阅读时间需要 2 分钟。
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in list 形式的特殊语法,list是源数据数组并且 item 是数组元素迭代的别名。
基本用法
html
js
var app=new Vue({el:'#app',data:{list:['angular','react','vue',jquery] }})
对象循环输出
我们经常需要在循环的时候元素是一个对象
html
{ {item.name}}--{ {item.age}}
js
var app=new Vue({el:'#app',data:{list:[ {name:"mumu", age:18}, {name:"zql", age:22}, {name:"曾庆林", age:28}, ] }})
索引
有时候我们需要知道当前循环元素的索引下标
{ {item.name}}-{ {index}}-{ {item.age}}
结果是
key
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
var app=new Vue({el:'#app',data:{items:['mumu','曾庆林','木木','mumu'] }})
如果不绑定tip 重复的'元素' 再列表循环在列表循环会警告
转载地址:https://cpython.blog.csdn.net/article/details/109307708 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年04月11日 15时27分33秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
深度剖析原理!超全Android中高级面试复习大纲,含BATJM大厂
2019-04-29
温故而知新!Android开发者该学习哪些东西提高竞争力?成功入职阿里
2019-04-29
火爆知乎的Android面试题-Android-App的设计架构经验谈,大厂内部资料
2019-04-29
看完直接怼产品经理!Android多进程从头讲到尾,跳槽薪资翻倍
2019-04-29
快速从入门到精通!面试的时候突然遇到答不上的问题怎么办?已拿到offer
2019-04-29
Android开发知识体系!腾讯+字节+阿里面经真题汇总,成功入职阿里
2019-04-29
android开发语言!大厂经典高频面试题体系化集合,移动架构师成长路线
2019-04-29
typescript学习(进阶)
2019-04-29
三天敲一个前后端分离的员工管理系统
2019-04-29
axios请求携带cookie实现跨域(后端springsecurity)
2019-04-29
spring data rest 不隐藏主键id
2019-04-29
后端传来json数据,vue前端如何渲染??
2019-04-29
vue 增删改数据实时更新
2019-04-29
手敲一个前后端分离项目——成果演示
2019-04-29
Linux——基础命令篇
2019-04-29
EL表达式、JSTL标签库、文件上传和下载
2019-04-29
Cookie、Session
2019-04-29
表单重复提交
2019-04-29
Filter
2019-04-29