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 ...
随机推荐
- LeetCode算法01 Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- workman 使用心得
1. 服务端调试: 直接在 Events.php 中 echo 变量, 即可在 命令行工具中 看到输出的信息. 以便进行调试. 2. 客户端调试: 由于是js代码, 可以直接 用 conso ...
- pycharm社区版对于django项目的创建
学习django的基础的东西:python基础(虽然自己看了一遍,不过还有好多东西都是一知半解的,所以还要重复看,去加强自己的基础). 数据库SQL(自己也是对一些基础语句运用的不熟练,然后接下来的主 ...
- sql写法，子节点名称拼接上级节点名称
with T(id,[name],pid) as(select 1,N'中国',-1 union allselect 2,N'山东',1 union allselect 3,N'济南',2 union ...
- Linux命令——taskset
参考:Linux taskset Command Tutorial for Beginners (with Examples) 简介 taskset命令用于设置进程(或 线程)的处理器亲和性(Proc ...
- IAR8.X安装教程
安装教程 1.下载 2.安装 3.和谐 1.下载 打开官网 找到要下载的版本3. 下载8.4下载地址 不支持中文路径,有点坑https://netstorage.iar.com/SuppDB/Pro ...
- 使用ansible部署CDH 5.15.1大数据集群
使用ansible离线部署CDH 5.15.1大数据集群 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在此之前,我之前分享过使用shell自定义脚本部署大数据集群,不管是部署CD ...
- WebForm SignalR 实时消息推送
原文:https://www.jianshu.com/p/ae25d0d77011 官方文档:https://docs.microsoft.com/zh-cn/aspnet/signalr/ 实现效果 ...
- JAVA 的8种基本数据类型
整型 int 一般的数据 long 极大的数据 short 用于特定的场合,比如底层的文件处理或者需要控制占用存储单元空间量的大数组 byte 用于特定的场合,比如底层的文件处理或者需要控制占用存储单 ...
- "人工智能",你怕了吗？
近期“人工智能+”,已经是市场上非常火的一个风口,人工智能已经渗透到人类生活的方方面面,服务于我们的生活.但是人工智能的迅速发展,也引起了我的担忧,一系列科技电影展示出来的人工智能奴役人类的场景,让人 ...