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. Silverlight for Windows Phone开发系列课程

    Silverlight for Windows Phone开发系列课程(1):Windows Phone平台概况         课程简介:本节开始介绍系列课程的概况,包括课程内容,先决条件,学习目的 ...

  2. linux shell 脚本攻略学习9--rename命令详解

    rename命令详解: 对文件重命名是常用的操作之一,一般对单个文件的重命名用mv命令,如: amosli@amosli-pc:~/learn/example$ ls abc.txt amosli@a ...

  3. linux运维常见英文报错中文翻译(菜鸟必知)

    linux常见英文报错中文翻译(菜鸟必知) 1.command not found  命令没有找到 2.No such file or directory  没有这个文件或目录 3.Permissio ...

  4. resume.c

    resume.c //采用CURLOPT_RESUME_FROM_LARGE 实现文件断点续传功能 #include <stdlib.h> #include <stdio.h> ...

  5. 【Linux】分割命令split

    如果你有文件太大,导致一些携带式装置无法复制的问题,嘿嘿!找 split 就对了! 他可以帮你将一个大文件,依据文件大小或行数来分割,就可以将大文件分割成为小文件了! 快速又有效啊!真心不错- [ro ...

  6. android图片等比例缩放 填充屏幕

    在ImageView的t同事设置两个属性 android:adjustViewBounds="true"android:scaleType="fitXY"

  7. windows Server 2012安装GUI

    1.进入PowerShell 在命令行提示输入符处,直接输入: PowerShell 2.安装GUI 在命令行提示输入符处,直接输入: Install-WindowsFeature Server-Gu ...

  8. 面试必备：HashMap源码解析（JDK8）

    1 概述 本文将从几个常用方法下手,来阅读HashMap的源码. 按照从构造方法->常用API(增.删.改.查)的顺序来阅读源码,并会讲解阅读方法中涉及的一些变量的意义.了解HashMap的特点 ...

  9. Android Notification 的声音和震动

    我们在Android系统发送一条Notification的时候,经常需要通过震动或声音来提醒用户.如何为Notification设置声音和震动了.大致思路有: - AndroidNotificatio ...

  10. 常用的apache commons工具，直接使用，便于快速开发

    详情 :http://commons.apache.org/ Components Description Latest Version Released Attributes Runtime API ...