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. 洛谷 P2783 有机化学之神偶尔会做作弊(Tarjan,LCA)

    题目背景 LS中学化学竞赛组教练是一个酷爱炉石的人. 有一天他一边搓炉石一边监考,而你作为一个信息竞赛的大神也来凑热闹. 然而你的化竞基友却向你求助了. “第1354题怎么做”<--手语 他问道 ...

  2. mvn 打包排除test

    mvn clean package compile -Dmaven.test.skip=true

  3. UML快速理解

    在团队协作过程中最常见的就是开会.开会最常用的就是图,而图中最常见的就是流程图.时序图.类图,这三个图可以清楚的描述你想解释的内容.学好类图不仅仅能帮助自己更清楚的梳理业务,还能提高开会效率. 上图是 ...

  4. Mybatis之：SqlSessionFactory、SqlSession

    public class CountryMapperTest { private static SqlSessionFactory sqlSessionFactory; @BeforeClass pu ...

  5. 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置

    企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...

  6. 【leetcode】1039. Minimum Score Triangulation of Polygon

    题目如下: Given N, consider a convex N-sided polygon with vertices labelled A[0], A[i], ..., A[N-1] in c ...

  7. No module named 'requests'---问题解决记录

    今天在用Pycharm执行脚本时,报错.如下: 问题排查: 1,检查是否安装了requests cmd输入命令:pip install requests 提示有新版本可以升级,那 我就升级了. 然后输 ...

  8. 用 margin 还是用 padding ？

    边界(margin):元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域. 补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影 ...

  9. 去掉注释index.html

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  10. Python3实现简单的钉钉机器人调用

    具体可以参考开发文档:https://ding-doc.dingtalk.com/doc#/serverapi3/iydd5h from urllib import parse, request im ...