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. Java List 类型转换

    java的类型转换让人忍不住在开始编码前骂一声  FUCK! 1  子类转父类 up List<SubClass> subs = ...; List<? extends BaseCl ...

  3. CF429E Points and Segments

    链接 CF429E Points and Segments 给定\(n\)条线段,然后给这些线段红蓝染色,求最后直线上上任意一个点被蓝色及红色线段覆盖次数之差的绝对值不大于\(1\),构造方案,\(n ...

  4. Java面向对象(二) 接口、多态和泛型

    一.接口 二.多态 多态是同一个行为具有多个不同表现形式或形态的能力. 2.1 类型转换 转换方式 隐式 向上转型 对于基本数据类型,存储容量低的可自动向存储容量高的类型转换 对于引用变量,子类可被转 ...

  5. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  6. JavaScript 复杂判断的更优雅写法借鉴

    前言: 我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得 ...

  7. Task9.Attention

    注意力模型最近几年在深度学习各个领域被广泛使用,无论是图像处理.语音识别还是自然语言处理的各种不同类型的任务中,都很容易遇到注意力模型的身影.所以,了解注意力机制的工作原理对于关注深度学习技术发展的技 ...

  8. 奇异值分解(SVD)(基础知识)

    参考:https://www.cnblogs.com/pinard/p/6251584.html 参考:http://blog.csdn.net/u010099080/article/details/ ...

  9. bzoj 做起走 -- bzoj 1009 GT 考试

    现在每次做一道bzoj上的题,整个人都感觉升华了... 先是在网上各种搜题解.要么只有代码,要么有点讲解看不懂,对于从来没有耐心看完别人代码的我,只能一篇一篇的翻..然后终于在某2011级同学的某段话 ...

  10. php strrchr()函数 语法

    php strrchr()函数 语法 作用:返回一个字符串在另一个字符串中最后一次出现的位置,并返回从该位置到字符串结尾的所有字符.大理石平台哪家好 语法:strrchr(string,char) 参 ...