一组数组时的循环

二组数组时的循环

另外可以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. OpenStack git cmd

    文件流转的三个工作区域:Git 的工作目录,暂存区域,以及本地仓库. 基本的 Git 工作流程如下: 在工作目录中修改某些文件. 对修改后的文件进行快照,然后保存到暂存区域. 提交更新,将保存在暂存区 ...

  2. 《nginx 一》dns解析 nginx安装

    DNS域名解析 整个过程大体描述如下,其中前两个步骤是在本机完成的,后8个步骤涉及到真正的域名解析服务器:1.浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就结束. ...

  3. 服务器端控件的"客户端"

    控件的服务端ID和客户端ID 比如一个ID为TextBox1的服务器端控件,在客户端访问该控件的DOM元素时 错误: var txtbox=document.getElementByID(" ...

  4. java环境安装(win7)

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u13-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入&qu ...

  5. Java中的continue语句——通过示例学习Java编程（12）

    作者:CHAITANYA SINGH 来源:https://www.koofun.com//pro/kfpostsdetail?kfpostsid=23 continue语句主要是用在循环代码块中.当 ...

  6. 微信小程序：点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  7. Spring MVC + Thymeleaf

    参考网址: https://www.cnblogs.com/litblank/p/7988689.html 一.简介 1.Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应 ...

  8. OpenSSL context 的几个参数

    NAME SYNOPSIS DESCRIPTION NOTES BUGS RETURN VALUES EXAMPLES SEE ALSO NAME SSL_CTX_set_verify, SSL_se ...

  9. Python 随笔之Redis

    Python学习记录 ——redis 2018-03-07 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从 ...

  10. WordPress企业建站心得

    回头聊聊我用WordPress做企业网站的事.说是企业网站,其实就是一个小的企业展示网站.事情要从我爸开了一家自行车店开始说起,自从他开了自行车店,不但开始学着玩起了微信(因为要做微信营销),又想到了 ...