Vue基础学习 --- 遍历数组
<body>
<div id="app">
<ul>
<!-- 遍历数组 -->
<li v-for="user in users">
{{user.name}}:{{user.age}}
</li> <!-- index索引，从0开始。 -->
<li v-for="(item, index) in users" :key="index">
{{item.name}}:{{item.age}}
</li> <!-- 遍历对象 value值如：Nimeide index键如:name-->
<li v-for="(value, index) in wife" :key="index">
{{value}}--{{index}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
// 数组
users: [
{ name: 'lisi', age: 12 },
{ name: 'zhangsan', age: 19 },
],
// 对象
wife: {
name: 'Nimeide',
age: 18
}
}
},
});
</script>
</body>
Vue基础学习 --- 遍历数组的更多相关文章
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- Java基础学习之数组基本属性和方法
数组对于每一门编程语言都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同.Java语言中提供的数组是用来存储固定大小的同类型元素.你可以声明一个数组变量,如 int[100] 来代替直接 ...
- JavaScript基础学习(三)—数组
一.数组简介 JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可 ...
- 【转】vue基础学习
1.基本绑定: new Vue( { el:'#elID', data:{ // data obj ...
- vue基础学习（一）
01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...
随机推荐
- nginx mirror/post_action+gor实现https流量复制
关于gor: 参考: https://www.cnblogs.com/jinjiangongzuoshi/p/11773070.html https://github.com/buger/gorepl ...
- 大数据的前世今生【Hadoop、Spark】
一.大数据简介 大数据是一个很热门的话题,但它是什么时候开始兴起的呢? 大数据[big data]这个词最早在UNIX用户协会的会议上被使用,来自SGI公司的科学家在其文章“大数据与下一代基础架构 ...
- web服务版智能语音对话
在前几篇的基础上,我们有了语音识别,语音合成,智能机器人,那么我们是不是可以创建一个可以实时对象的机器人了? 当然可以! 一,web版智能对话 前提:你得会flask和websocket 1 ,创建f ...
- （备忘）Java web项目迁移到Centos7中验证码无法显示
每天多学一点知识. 今天部署项目的时候出现验证码无法显示的问题,如下图所示:
- Intel虚拟化技术——EPT、VPID
背景 内存用于暂存CPU将要执行的指令和数据,所有程序的运行都必须先载入到内存中才可以,内存的大小及其访问速度也直接影响整个系统性能.在平台虚拟化技术中,Guest的运行也需要依赖内存.和运行在真实物 ...
- 拖拉插件 drag drop
https://hejx.herokuapp.com/vue-dndl # Installation npm install vue-drag-and-drop-list --save # Usage ...
- puppeteer UI自动化测试demo（一）
一.简介 这个不大常见,比较常见的是selenium和weddriver: 所以就增加一个说明,来自官网的. Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTool ...
- gdb调试（二）
继续研究gdb相关的调试技巧,话不多说进入正题: 查看运行时数据: 这个上节中已经用过了,这里就不多说了,比较简单 还是有上节中的simple.c例子,不过得稍微做一些修改为了使用这些命令: simp ...
- P1436 棋盘分割[dp]
题目描述 将一个8*8的棋盘进行如下分割:将原棋盘割下一块矩形棋盘并使剩下部分也是矩形,再将剩下的两部分中的任意一块继续如此分割,这样割了(n-1)次后,连同最后剩下的矩形棋盘共有n块矩形棋盘.(每次 ...
- 使用Jackson的@JsonFormat注解时出现少了 8 个小时
比如数据库存的日期是2018-01-05,转成json则变成了2018-01-04 解决办法: @JsonFormat(pattern="yyyy-MM-dd") public D ...