一组数组时的循环

二组数组时的循环

另外可以v for 20 可以直接操作数字

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <!--item相当于v-->

    <li v-for="(v,k) in test">

        {{k}} - {{v}}

    </li>

    <li v-for="(item,key,index) in user">

        {{index}} - {{key}} -  {{item}}

    </li>

    <hr>

    <li v-for="(item,key) in arr">

       {{key}} - {{item.name}} - {{item.age}} - {{item.sex}}

    </li>

    <hr>

    <table border="1" width="100%">

        <tr v-for="v in 20">

            <td>{{v}}</td>

        </tr>

    </table>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            user: {

                name: '向军',

                age: '22',

                sex: 'boy'

            },

            arr:[

                {name: '小王',age: '21',sex: 'boy'},

                {name: '小李',age: '22',sex: 'boy'},

                {name: '张三',age: '23',sex: 'boy'},

            ],

            test:['css','js','php']

        }

    });

</script>

</body>

</html>

效果:

18.VUE学习之-v-for操作对象与数值的更多相关文章

  1. 018——VUE中v-for操作对象与数值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue v-for操作对象与数值

    <!doctype html> <html lang="en"> <head id="head"> <meta cha ...

  3. scala编程第18章学习笔记——有状态的对象

    银行账号的简化实现: scala> class BankAccount{ | private var bal: Int = 0 | def balance: Int = bal | def de ...

  4. PHP中的MySQLi扩展学习（六）MySQLI_result对象操作

    在之前的文章中,我们就已经接触过 MYSQLI_result 相关的内容.它的作用其实就是一个查询的结果集.不过在 PDO 中,一般直接通过 query() 或者 PDOStatement 对象进行查 ...

  5. PHP中的MySQLi扩展学习（五）MySQLI_STMT对象操作

    就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...

  6. 我所理解的Vue——学习心得体会1（Vue对象）

    初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...

  7. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  9. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

随机推荐

  1. js固定两位小数toFixed（2）

    total=total.toFixed(3); 小数问题:可以number(),或者*1来改变变量类型.

  2. idea关闭sonar自动扫描

    file-setting-other setting-sonar相关的setting全部关闭

  3. <邮件的反垃圾反病毒>

    本章——发送接收邮件的工具为雷鸟 安装 # yum install dovecot-mysql.x86_64 dovecot.x86_64 -y 编辑文件 vim 10-mail.conf mail_ ...

  4. ORACLE比较两个数据库的表结构

    create table ESPACE_TABLE( TABLE_NAME VARCHAR2(100) not null) create table ESPACE_COLUMN( TABLE_NAME ...

  5. AJPFX总结java创建线程的三种方式及其对比

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...

  6. 景安快云VPS挂载数据盘至指定目录 使得系统与数据分离

    如果我们细心的用户会发现购买景安快云VPS主机后,通过df检测看到系统盘大小与我们购买时候给的不一样,这个是很正常的事情.一般VPS主机商会通过给予系统盘和数据盘一并的数据磁盘给我们,但是默认我们看到 ...

  7. centos开机启动自定义脚本

    有些时候我们需要在服务器里设置一个脚本,让他一开机就自己启动.方法如下: cd /etc/init.d vi youshell.sh #将youshell.sh修改为你自己的脚本名 编写自己的脚本后保 ...

  8. 关于Windows创建进程的过程

    之前有听到别人的面试题是问系统创建进程的具体过程是什么,首先想到的是CreateProcess,但是对于具体过程却不是很清楚,今天整理一下. 从操作系统的角度来说 创建进程步骤:        1.申 ...

  9. js实现排序去重计算字符次数

    /*去重*/ var arr=[1,4,4,7,3,9,0,3,2,1,"你好","你","你好","你 "]; var ...

  10. json字符串转换成对象需要注意的问题

    json转换成对象的时候应该尽量避免出现特殊的符号,如“\”这样的字符在转义成数组的时候会被去除掉,最好的例子就是后台返回的内容为存储路径的JSON,这时候最好是把一个斜杠变为两个斜杠,如: [{&q ...