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 ...
随机推荐
- LinuxKernel优秀博客
1.vanbreaker的专栏 2.LinuxKernel Exploration 3.DroidPhone的专栏 4.Linux内核研究以及学习文档和ARM学习以及研究的开放文档 [力荐] 5. ...
- mac安装openjdk8-maven-mysql-git-docker
1. openjdk8安装命令查看地址:https://github.com/AdoptOpenJDK/homebrew-openjdk#other-versions 感觉上面命令地址不靠谱,还是 ...
- yum源仓库的三种搭建方式
yum源的三种搭建方式 一. 本地yum仓库的搭建 1.1.获取软件包资源 将iso镜像挂载在本地目录中,此次挂载目录为/var/www/html/repo/,此目录本身不存在,需要创建.软件宝资源 ...
- jenkins+ant+jmeter接口自动化的持续集成
一.jmeter.jenkins安装 这里不再说明,请看上一个随笔!!! 链接:https://www.cnblogs.com/magicYJ/p/11839646.html 二.ant安装 下载地址 ...
- 【转】Http和Https下的cookie的写入问题
网站https:// 可以登陆, 但是切换到http的时候不能登陆. 原因是:https访问的时候,返回的cookie设置了secure=1, 切换成http访问的时候, 这个时候不能操作那个cook ...
- 《The One!团队》第八次作业：ALPHA冲刺（二）
项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)掌握软件测试基础技术.(2)学习迭代式增量软件开发过程(Scrum) 第二天 ...
- 拉格朗日插值matlab实现
已给sin0.32=0.314567,sin0.34=0.333487,sin0.36=0.352274,用线性插值及抛物插值计算sin0.3367的值并估计截断误差. 1. 线性插值 clc;cle ...
- ps -ef、ps aux(查看进程占用内存大小)
Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Uni ...
- Logparser
http://www.microsoft.com/en-us/download/details.aspx?id=24659 Logparser 的用法 https://www.cnblogs.com/ ...
- learning java AWT MenuBar Menu MenuItem菜单
import java.awt.*; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import java ...