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 ...
随机推荐
- 高效内存池的设计方案[c语言]
一.前言概述 本人在转发的博文<内存池的设计和实现>中,详细阐述了系统默认内存分配函数malloc/free的缺点,以及进行内存池设计的原因,在此不再赘述.通过对Nginx内存池以及< ...
- STM32+IAR 解决Error[Pe147]: declaration is incompatible with "__nounwind __interwork __softfp unsigned
在IAR中编译STM32工程,遇到 Error[Pe147]: declaration is incompatible with "__nounwind __interwork __soft ...
- 数据库系统load飙高问题解决思路
工作过程中有时候会接收到数据库服务器器load 飙高的报警,比如: load1 15.25 base: 8.52,collect time:2014-08-30 如何处理load 异常飙高的报警呢? ...
- wireshark 抓包再利用TCP socket发送包里的payload是可以实现登陆的
用户密码可被批量破解 在用户使用手机端登录时,对数据进行抓包分析. 多次抓包分析后,可得到几个关键TCP数据包. 根据前面逆向编写出的解密算法,使用socket进行数据发包测试: 可以模拟APK进行用 ...
- 非正常卸载Chrome浏览器导致无法重新安装
昨晚在使用selenium的时候,Chrome浏览器和Chromedriver.exe不兼容,前几天使用的时候都没问题,查看浏览器版本后发现浏览器已经自动升级为67版本(我之前安装的是61版本). 于 ...
- vue-router路由拦截基本设置，md5加密，js-cookie，vuex刷新页面store中的数据丢失等
vuex持久化 vuex-persistedstate
- Flume拦截器、监控器
一.拦截器 1.拦截器:拦截器主要作用在source和channel之间,用于给event设置header消息头,如果没有设置拦截器,则event中只有message. 常见的拦截器有: Timest ...
- Kafka ISR and AR HW 、 LEO
相信大家已经对 kafka 的基本概念已经有一定的了解了,下面直接来分析一下 ISR 和 AR 的概念. 0|1ISR and AR 简单来说,分区中的所有副本统称为 AR (Assigned Rep ...
- YAML_05 定义一个变量创建用户,设置密码
ansible]# vim user2.yml --- - hosts: cache remote_user: root vars: user: wangwu tasks: ...
- (尚009)Vue列表渲染
变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...