vue v-for循环使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app"> <!-- 循环普通数组 -->
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
--------------------
<!-- 循环对象数组 -->
<p v-for="(user, i) in list1">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
--------------------
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">键是： {{ key }} --- 值是： {{ val }} -- 索引： {{ i }}</p>
--------------------
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p> </div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6],
list1: [{
id: 1,
name: 'zs1'
},
{
id: 2,
name: 'zs2'
},
{
id: 3,
name: 'zs3'
},
{
id: 4,
name: 'zs4'
}
],
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
methods: {}
});
</script>
</body> </html>
vue v-for循环使用的更多相关文章
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- Vue中的循环以及修改差值表达式
0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...
- vue标签内循环数据逗号分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式
功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...
- vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
- Vue.js：循环语句
ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...
- vue中动态循环model
vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...
- vue的v-for循环普通数组、对象数组、对象、数字
如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
随机推荐
- JavaScript：利用递归实现对象深拷贝
先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...
- 2019-2-16-WPF-封装-dotnet-remoting-调用其他进程
title author date CreateTime categories WPF 封装 dotnet remoting 调用其他进程 lindexi 2019-02-16 09:40:26 +0 ...
- 2018-8-10-C#-不能用于文件名的字符
title author date CreateTime categories C# 不能用于文件名的字符 lindexi 2018-08-10 19:16:52 +0800 2018-02-22 1 ...
- 转载 初探Promise
初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读 · 读完需要 65 分 ...
- HTML 5适合小公司，适合在大平台上做内容
Web App,现在有时候也称为轻应用,不仅是通过浏览器就能打开的应用.现在随着 HTML 5 在手机端的优越性,已经慢慢称为了 Web App 的主流.Web App 除了出现在 PC 的浏览器中, ...
- oracle如何加固你的数据库
要注意以下方面 1. 修改sys, system的口令. 2. Lock,修改,删除默认用户: dbsnmp,ctxsys等. 3. 把REMOTE_OS_AUTHENT改成False,防止远程机器直 ...
- React-FlipOver-Counter（日历翻页）
跟窝一起学习鸭~~ //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.cs ...
- python三种导入模块的方法和区别
方法一: import modname 模块是指一个可以交互使用,或者从另一Python 程序访问的代码段.只要导入了一个模块,就可以引用它的任何公共的函数.类或属性.模块可以通过这种方法来 使用其它 ...
- 阿里小二的日常工作要被TA们“接管”了！
昨天有人偷偷告诉我说 阿里巴巴其实是一家科技公司! 我想了整整一夜 究竟是谁走漏了风声 那么重点来了,阿里到底是如何在内部的办公.生活中,玩转“黑科技”的呢? AI取名:给你专属的“武侠”花名 花名是 ...
- [Java]ITOO初步了解 标签： javajbosstomcat 2016-05-29 21:14 3367人阅读 评论(34)
开始接触Java的ITOO了,这两天在搭环境,结果发现,哇,好多没接触过的东西,先写篇博客来熟悉一下这些工具. JBoss 基于Tomcat内核,青胜于蓝 Tomcat 服务器是一个免费的开放 ...