Vue学习（五）：列表渲染
<!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学习（五）：列表渲染的更多相关文章
- 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 ...
- 关于vue.js中列表渲染练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- Vue学习五：v-for指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- vue学习(五) 访问vue内部元素或者方法
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- 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 基本知 ...
- ExtJS4.2学习(五)表格渲染与复选框
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...
- vue学习五之VueCLi
概念 通俗的说,Vue CLI是我们创建大型项目时的脚手架,所谓脚手架,就是帮助我们建设好了建造大厦的所需模板,建设者只需往模板里面填入实质内容,即可完成大厦的建设,对于程序开发来说,脚手架使程序员只 ...
- 23.VUE学习之-列表的排序sort
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 学习五 深入了解components（父子组件之间的传值）
上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...
随机推荐
- android 学习笔记 杂记1
getIntent().getExtras().get("intent"); 这个intent是数据包装的参数. 比如: Intent intent = new Intent(th ...
- c#数据库连接池
因为使用习惯的问题,我封装了一个数据库连接池Hikari,这是我自定义的数据库连接池.因为c#的连接池按照规范的ADO.NET里面实现定义的,由数据库官方提供,但是实现方式就不知道了,反正没有看出来, ...
- 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛--D-psd面试
链接:https://www.nowcoder.com/acm/contest/90/D 来源:牛客网 1.题目描述 掌握未来命运的女神 psd 师兄在拿了朝田诗乃的 buff 后决定去实习. 埃森哲 ...
- /etc/fstab开机自动挂载设备配置
第一列:设备名字(路径?) 第二列:设备挂载路径(挂载到的位置) 第三列:分区格式 第四列:文件系统参数(?) 第五列:是否自动dump备份 0 不要 1 定期 2 不定期 第六 ...
- 创建私有CA并签发证书
一.创建私有CA 1.创建所需要的文件 2.创建私有密钥 3.CA自签证书 -new: 生成新证书签署请求: -x509: 专用于CA生成自签证书:不自签的时候不要加该选项 ...
- 【shell脚本学习-2】
#!/bin/bash - #echo do you have exetuate this project \n printf "please input your passwd" ...
- Object.keys方法
我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'} ...
- JavaScript鼠标事件
mousedown 鼠标被按下. mouseup 鼠标按钮被释放(抬起). click 鼠标左键(或中建)被单击. 事件触发顺序:mousedown>mouseup>click>db ...
- thinkphp验证码实现。
作为我大天朝的程序员,如果不会点thinkphp框架确实有点说不过去了(虽然作为菜鸟的我才入坑没几个月).不过不会也没关系,很简单的一个php框架.今天为大家介绍的是thinkphp如何实现验证码的功 ...
- Apache httpd Server 配置正向代理
背景 代理(Proxy),位于客户端与实际服务端之间,当客户端需要请求服务端内容时,先向代理发起请求,代理将请求转发到实际的服务器,再原路返回.也可以在代理服务器设置缓存,将实际服务器上不常变化的内容 ...