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. 多线程、同步实现方法及Error和Exception的区别与联系

    多线程.同步实现方法? 实现线程有两种方法: 继承Thread类 实现Runnable接口 实现同步也有两种方法 一种是用同步方法:同步方法就是在方法返回类型后面加上synchronized, 比如: ...

  2. 【leetcode】1079. Letter Tile Possibilities

    题目如下: You have a set of tiles, where each tile has one letter tiles[i]printed on it.  Return the num ...

  3. php strtr()函数 语法

    php strtr()函数 语法 作用:转换字符串中的某些字符直线电机生产厂家 语法:strtr(string,from,to)或者strtr(string,array) 参数: 参数 描述 stri ...

  4. php strrchr()函数 语法

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

  5. JS自定义随机数字键盘

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Magic Line

    Magic Line 玄学过题系列,随机选在所有点左下方的点,然后对其他点斜率排序,取斜率在中间两个点之间 比赛时,左下方点不够随机==,导致没卡过去 #include<bits/stdc++. ...

  7. 2019牛客暑期多校训练营(第六场)C - Palindrome Mouse (回文自动机)

    https://ac.nowcoder.com/acm/contest/886/C 题意: 给出一个串A , 集合S里面为A串的回文字串 , 现在在集合S里面找出多少对(a,b),b为a的字串 分析: ...

  8. python+selenium 滑动滚动条的操作

    工作中碰到一种情况就是,要定位的元素需要滚动条滑到下方后才可以显示出来. 这种情况下,就要先滑动滚动条,再定位元素. 那么滑动滚动条我以前记录了appium中的操作,那么,selenium中该如何操作 ...

  9. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  10. Visual Studio Code - 快捷键

    默认快捷键 Visual Studio Code 默认快捷键 代码提示(自动补全,自动完成) 默认是快捷键是Ctrl+Space,与搜狗输入法切换中英文的快捷键冲突了..可以改搜狗输入法的快捷键(Sh ...