一组数组时的循环

二组数组时的循环

另外可以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. var obj = eval(result); 解析json

    l  var obj = eval(result);解析json

  2. 记DotNetBar换肤

    界面: comboBoxEx  选择皮肤 buttonX 测试指定皮肤 styleManager 后台代码: 初始化 : this.EnableGlass = false; 设置窗体效果 不设置 依然 ...

  3. 使用AlarmManager定期执行工作

    新建一个Service来模拟后台执行的程序,PollingService.java: package com.ryantang.rtpollingdemo; import android.app.No ...

  4. Customers Who Never Order

    Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...

  5. 少写代码帮你模块化方法 & 运动框架 & 简化轮播图

    模块化就是通过每一个js里封装一个方法:用exports将他输出, 在下一个js用require的方法加载js时就会将方法输出.然后在主页面引入require.js; 模块化基本写法: define( ...

  6. Css文件目录结构

    一般一个网站会有这么三个样式: global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) global.css | res ...

  7. android获取https证书

    最近碰到一个问题, 有朋友问android这边能不能拿到服务器下发的证书,意思就是   自签名证书的https接口,在请求的时候,也没有添加自签名证书进信任列表,直接去发https请求,按照正常htt ...

  8. 软件License设计

    如何保护软件版权,最常用的办法就是设计一套license验证框架. 1.我们的常规需求如下: .可以限制软件只能在一台机器上使用: 目前很多软件都是一机一码的销售,软件换一台机器则不能使用,想要几台机 ...

  9. PRD、MRD、BRD的含义

    一.PRD的含义 英文简称,PRD(Product Requirement Document),PRD文档中文意思是:产品需求文档. PRD文档是产品项目由“概念化”阶段进入到“图纸化”阶段的最主要的 ...

  10. JavaWeb中五种转发方式（转）

    今天本来是想找一下在jsp中实现转发的方式的,无意中看到了一篇文章,然后稍微综合了把服务器端的转发也包括在内.   1. RequestDispatcher.forward() 是在服务器端起作用,当 ...