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>v-for遍历</title>

    <script src="../lib/vue.js"></script>

</head>

<body>

    <div class="app">

        <p v-for="(i,item) in list">******索引值：{{ i }}***值：{{ item }}******</p>

        <!-- v-for遍历普通数组 -->

        <p v-for="(item,i) in arr">id:{{item.id}}********name:{{item.name}}*******索引值：{{i}}</p>

        <!-- v-for遍历数组中的对象 -->

        <p v-for="(val,key,i) in user">val:{{val}}****key:{{key}}******index:{{i}}</p>

        <!-- v-for直接遍历对象 -->

        <p v-for="i in 10">这是第{{i}}次循环</p>

        <!-- 遍历迭代次数 -->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                list:[0,1,2,3,4,5],

                arr:[

                    {'id':1,'name':'齐怪'},

                    {'id':1,'name':'齐怪'},

                    {'id':1,'name':'齐怪'},

                ],

                user:{

                    'id':'1',

                    'name':'齐怪',

                    'sex':'boy'

                }

            }

        })

    </script>

</body>

</html>

vue.js（8）--v-for的使用的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. Vue.js学习笔记（1）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

  3. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  4. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  7. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  8. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  9. Vue.js常见问题

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  10. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

随机推荐

  1. Redis 复制原理及特性

    摘要 早期的RDBMS被设计为运行在单个CPU之上,读写操作都由经单个数据库实例完成,复制技术使得数据库的读写操作可以分散在运行于不同CPU之上的独立服务器上,Redis作为一个开源的.优秀的key- ...

  2. nginx http正向代理简单配置及systemd 配置

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  3. k8s源码编译

    1.可在github上面直接下载源码 2.下载所需要的docker镜像,并打上tag,不知道tag,可以先编译一下,会提示所需image. docker pull index.alauda.cn/xu ...

  4. 【leetcode】1048. Longest String Chain

    题目如下: Given a list of words, each word consists of English lowercase letters. Let's say word1 is a p ...

  5. LeetCode--058--最后一个单词(java)

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  6. 在vue项目中，解决如何在element表格中循环出图片列！

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  7. 黑苹果 MacOS 10.15 Catalina安装教程

    10.15 Catalina 桌面 一.准备工作 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7.5G的会失败) MacOS镜像.TransMac(刻录工具).DiskGeni ...

  8. WPF 设置窗体大小为显示器工作区域大小

      最近做的项目遇到一个问题,窗体在1680*1050分辨率下显示,系统字体设置为小字体时,显示没问题,但是调到中等字体时,窗体显示位置出了问题.主窗体为无边框窗体,拖动及放大缩小事件都是自己写的. ...

  9. （2）用C语言实现面向对象---封装、继承和多态

    封装:struct中封装成员变量和函数指针. 继承:结构体中嵌套结构体. 多态:子类对象动态指向父类的现象叫多态. void  pFunction2(void) { printf(“函数2”): } ...

  10. Tomcat服务器时间不正确

    ================================1=============================== 增加Tomcat参数设置"-Duser.timezone=G ...