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 ...
随机推荐
- sqlserver TOP 问题（转载）
来谈谈SQL数据库中"简单的"SELECT TOP—可能有你从未注意到的细节 首先从博客园的Jerome Wong网友说起 他提出了一个这样的问题 本人写了好几年SQL ...
- 【Java】锁机制
参考 https://blog.csdn.net/varyall/article/details/79698145 <深入理解Java虚拟机> 锁状态:无锁.偏向锁.轻量级锁.重量级锁(具 ...
- 安装folly库以及folly的ConcurrentHashMap的简单使用
我在写grpc的实例时, 需要使用一个多线程的hash map, C++标准库中没有多线程的hash map, facebook开源的folly中存在大量的基础类, 中间存在一个高性能的hash ma ...
- SQL SERVER-解析Extendevent文件数据
--解析xel数据 select SWITCHOFFSET(n.value('@timestamp','Datetime'),'+08:00') as EventTime, n.value('(dat ...
- pod健康检查(liveness probe存活探针&&readiness probe 可读性探针)
在Kubernetes集群当中,我们可以通过配置liveness probe(存活探针)和readiness probe(可读性探针)来影响容器的生存周期.参考文档:https://kubernete ...
- Java--8--新特性--Optional--有效防止空指针异常
Optional<T> 类(java.util.Optional) 是一个容器类,代表一个值存在或不存在,原来用 null 表示一个值不存在,现在 Optional 可以更好的表达这个概念 ...
- python 执行系统命令模块比较
python 执行系统命令模块比较 1.os.system模块 仅仅在子终端运行命令,返回状态码,0为成功,其他为失败,但是不返回执行结果 如果再命令行下执行,结果直接打印出来 >>> ...
- 51nod 1396 还是01串
给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...
- P2149 [SDOI2009]Elaxia的路线[最长公共路径]
题目描述 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间. Elaxia和w**每天都要奔波于宿舍和实验室之间,他们 希望在 ...
- 扫雷小游戏PyQt5开发【附源代码】
也没啥可介绍哒,扫雷大家都玩过. 雷的分布算法也很简单,就是在雷地图(map:二维数组)中,随机放雷,然后这个雷的8个方位(上下左右.四个对角)的数字(非雷的标记.加一后不为雷的标记)都加一. 如何判 ...