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& ...
随机推荐
- Redis → 下载安装及启动
一.Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选 ...
- ubuntukylin-16.04安装
目录 安装 虚拟机安装 系统安装 vmware tools 安装 优化 1.切换软件源 2.软件源和软件更新 3.vim插件 4.安装Sublime Text 3 5.安装福昕阅读器 6.安装Anac ...
- 初识Django(DNS原理及web框架)
DNS的原理 假设www.abc.com的主机要查询www.xyz.abc.com的服务器ip地址. 知识点 1.hosts文件:以静态映射的方式提供IP地址与主机名的对照表,类似ARP表 2.域:a ...
- Java练习 SDUT-2192_救基友记2
救基友记2 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 屌丝WP的好基友CZ又被妖鬼给抓走了(CZ啊,CZ-.怎么说 ...
- Effective Modern C++：05右值引用、移动语义和完美转发
移动语义使得编译器得以使用成本较低的移动操作,来代替成本较高的复制操作:完美转发使得人们可以撰写接收任意实参的函数模板,并将其转发到目标函数,目标函数会接收到与转发函数所接收到的完全相同的实参.右值引 ...
- kubernetes1.4新特性：支持Docker新特性
(一)背景资料 在Kubernetes1.2中这个第三方组件就是go-dockerclient,这是一个GO语言写的docker客户端,支持Dockerremote API,这个项目在https:// ...
- laravel 参数设置
路由命名 Route::get('user/{id?}', function ($id = 1) { return "用户ID: " . $id; })->name('use ...
- C++异常相关
使用异常处理,程序中独立开发的各部分能够就程序执行期间出现的问题相互通信,并处理这些问题.C++ 的异常处理中,需要由问题检测部分抛出一个对象给处理代码,通过这个对象的类型和内容,两个部分能够就出现了 ...
- 配置上这个模板Bug少90%
本来写程序经常会碰到各种难缠的Bug,自从修改了注释模板,bug明显少了,看效果图: 好吧,我逗比了 下面是文字版: /** _oo0oo_ o8888888o 88" . "88 ...
- ELK之开心小爬爬
1.开心小爬爬 在爬取之前需要先安装requests模块和BeautifulSoup这两个模块 ''' https://www.autohome.com.cn/all/ 爬取图片和链接 写入数据库里边 ...