1、效果图

2、cart.json

{

  "message":"",

  "status":"1",

  "result":{

    "totalMoney":0,

    "productList":[

      {

        "productId":"10001",

        "productName":"黄鹤楼香烟",

        "productPrice":19,

        "productQuentity":2,

        "productImage":"goods-1.jpg",

        "parts":[

          {

            "partsId":"a001",

            "partsName":"打火机"

          },

          {

            "partsId":"a002",

            "partsName":"XXX"

          }

        ]

      },

      {

        "productId":"10002",

        "productName":"加多宝",

        "productPrice":8,

        "productQuentity":3,

        "productImage":"goods-2.jpg",

        "parts":[

          {

            "partsId":"a001",

            "partsName":"吸管"

          }

        ]

      },

      {

        "productId":"10003",

        "productName":"耳机",

        "productPrice":39,

        "productQuentity":4,

        "productImage":"ear.jpeg",

        "parts":[]

      }

    ]

  }

}

3、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div id="app">

<!--<h2>{{title}}</h2>-->
<!--遍历的时候，如何取得每项的索引，index就是索引-->

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

        <div >产品名称：{{item.productName}}</div>

        <dd v-for="part in item.parts" v-text="part.partsName"></dd>

        <div>价格：{{item.productPrice+"--------------------"+index}}</div>

        <div>数量：{{item.productQuentity}}</div>

<div>金额：{{item.productPrice*item.productQuentity}}</div>

<!-- 图片路径的设置，下面注释的这两个不能用，需要使用v-bind:src=""-->

        <!--<img src="item.productImage" alt="">-->

        <!--<img src="{{item.productImage}}" alt="">-->

        <img v-bind:src="item.productImage" alt="">

    </li>

</div>

<script src="js/lib/vue.min.js"></script>

<script src="js/lib/vue-resource.min.js"></script>

<script src="js/cart.js"></script>

</body>

</html>

4、cart.js

/**

 * Created by kk on 2017/4/16.

 */

var vm =new Vue({

    el:"#app",

    data:{

        // title:"hello vue"

        totalMoney:0,

        productList:[]

    },

    filters:{

    },

    mounted:function () {

        //类似于jquery中的ready方法

        this.cartView();

    },

    methods:{

        cartView:function () {

    // this.title="Vue hello"

            var _this=this;

            this.$http.get("data/cart.json",{"id":123}).then(function (res) {

                _this.productList=res.body.result. productList;//body是vue封装的一层

                _this.totalMoney=res.body.result.totalMoney;

            });

}

    }

});

vue.js中请求数据v-for循环使用数据的更多相关文章

  1. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  2. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  4. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  5. angular.js和vue.js中实现函数去抖（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  6. Vue.js 3.x 中跨层级组件如何传递数据？

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  7. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

随机推荐

  1. OpenWrt/LEDE配置OpenVPN Server

    安装openvpn不再赘述 准备证书文件主要有以下文件: (服务端)ca.crtdh2048.pemserver.crtserver.key(客户端)ca.crtclient01.keydp-clie ...

  2. 【原创视频教程】SqlServer2008视频教程[共9集]

    这些视频都是13年-14年两年里面录制的,怀着一份创造之心, 可能说得不对,或者说得肤浅,望见谅....也请指正... 谢谢你的支持.. 更多资料:北盟网 www.bamn.cn ---------- ...

  3. （原+转）使用anaconda遇到的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6669434.html 使用anaconda怎么感觉都是问题啊.... 1. Intel MKL FAT ...

  4. Swift 导航栏设置图片点击事件，图片蓝色的解决方案

    如果导航栏想做一个点击事件,正好是一个图片 我们可以直接这样: self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIIm ...

  5. hihocoder第229周：最大连续字母个数

    题目链接 给定一个仅包含小写字母的字符串s(长度小于1e5),你可以交换任意两个字符的位置,现在允许交换k次,要求交换之后,s中最长的连续相同字符个数尽量多,求这个最长连续区间的长度. 样例 输入 1 ...

  6. 大道至简的C语言内存管理

    C语言内存的开辟和释放需要程序员自己来实现. 而C语言的内存开辟和释放只在stdlib.h里面提供了四个函数,这么简洁的设计就足以完成一切工作. C++里面各种类型的指针漫天飞舞,显得啰嗦冗余. ca ...

  7. 简单的Java串口通讯应答示例

    java串口通讯第一次使用,找的资料都比较麻烦,一时没有理出头绪,自己在示例的基础上整理了一个简单的应答示例,比较简陋,但演示了java串口通讯的基本过程. package com.garfield. ...

  8. coreData详解

    1.初识CoreData CoreData的结构构成: NSManagedObjectModel的构成: 可以通过Entity创建继承自NSManagedObject类的文件,这个文件就是开发中使用的 ...

  9. apk 静默安装

    老大要我弄个自动更新,要用到静默安装,网上找到了些大拿的代码,我拿去改吧改吧,先贴出来: /** * 软件静默安装 * @param apkAbsolutePath apk文件所在路径 * @retu ...

  10. xtrabackup-工作原理

    数据备份 xtrabackup是基于innodb的crash恢复功能之上的.它会拷贝innodb数据文件(这会导致数据不一致的),然后对文件执行crash恢复使其一致. 因为innodb维护了redo ...