一组数组时的循环

二组数组时的循环

另外可以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车牌号校验

    function cpyz(str) {        var newcarnum= str.value.toUpperCase();    var regExp = /(^[\u4E00-\u9FA ...

  2. 牛客网Java刷题知识点之四种不同的方式创建线程

    不多说,直接上干货! 有4种方式可以用来创建线程: 第一种:继承Thread类,重写run方法 第二种:实现Runnable接口,并实现该接口的run方法(一般我们在编程的时候推荐用这种) 第三种:实 ...

  3. HTTP原理及状态码汇总

    什么是HTTP: HTTP(HyperText Transfer Protocol超文本传输协议)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准,为了提供一种发布和接收HTM ...

  4. Visual Studio Code的快捷键和相关技巧

    编辑相关的键盘快捷键: Shift + Alt + F = 格式化代码(似乎不好用) Ctrl + Shift + Enter = 在上一行新建空行并转到上一行 Ctrl + K,Ctrl + C = ...

  5. CPU保护模式DPL、CPL简易理解

    现代INTEL CPU都有保护模式,实模式这两种CPU运行模式.当CPU加电,CPU初始化时就运行在是模式下,然后现代操作系统会从实模式跳转到保护模式! 为什么需要保护模式? 在最开始编程的汇编时代, ...

  6. JS案例练习：图片切换+切换模式

    先附图: CSS样式部分: <style> *{;} body{font-family:'Microsoft YaHei';} .menu{margin:20px auto 0; widt ...

  7. Riverbed SteelHead 9.5.0

    平台: scientific linux release 6.5 类型: 虚拟机镜像 软件包: riverbed steelhead 9.5.0 basic software Enterprise i ...

  8. hadoop上传文件失败报错（put: Cannot create file/eclipse.desktop._COPYING_. Name node is in safe mode.）

    解决办法: 离开安全模式方法:执行以下命令即可 bin/hadoop  dfsadmin -safemode leave 若不处理安全模式的话,web服务无法启动,dfsadmin report结果异 ...

  9. 05、Win7上openSSH的安装与配置

    05.Win7上openSSH的安装与配置 1.概述 linux上的ssh命令在网络通信场景下非常方便.现在windows也支持ssh方式和远程主机进行访问.如果只是使用ssh简单的访问功能,就需要很 ...

  10. hive 报错FAILED: Error in metadata: java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient FAILED: Execu

    使用hive一段时间以后,今天在使用的时候突然报错,如下: hive> show databases;FAILED: Error in metadata: java.lang.RuntimeEx ...