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. C++基础学习教程（六）----类编写的前情回想以及项目实战(1)

    在開始类的编写之前我们依旧须要回想整理一下前面所说的内容,(前面尽管是一个自己定义数据类型的实现过程,可是内容有点繁杂). 先看一段代码: /** @file calssStruct.cpp */ / ...

  2. 转：Spring Cache抽象详解

    缓存简介 缓存,我的理解是:让数据更接近于使用者:工作机制是:先从缓存中读取数据,如果没有再从慢速设备上读取实际数据(数据也会存入缓存):缓存什么:那些经常读取且不经常修改的数据/那些昂贵(CPU/I ...

  3. Linux-非结构化数据同步-Linux下Rsync+Rsync实现非结构化增量差异数据的同步2

    说明: 操作系统:CentOS 5.X 源服务器:192.168.21.129 目标服务器:192.168.21.127,192.168.21.128 目的:把源服务器上/home/www.osyun ...

  4. 【Oracle 】tablespace 表空间创建和管理

    1.表空间的概述 1. 表空间是数据库的逻辑组成部分. 2. 从物理上讲,数据库数据存放在数据文件中: 3. 从逻辑上讲,数据库是存放在表空间中,表空间由一个或者多个数据文件组成. 2.oracle的 ...

  5. SQL 中 Arg的使用

    今天在写SQL脚本时用到了Arg这个函数,发现了一个问题就是如果取平均数的字段是int类型那么,无论你怎么平均都不会有小数位出来. 因为Arg默认将你取的平均值转换为了你的字段对应的类型int.那么如 ...

  6. 编码 GBK 的不可映射字符

    一般做项目公司都会统一要求文件编码类型,很多为了实现应用国际化和本地化和更高的性能,而选用UTF-8而非GBK. 但在开发过程中我们都用的是IDE,只要更改了配置就不用操心了,但有时我们也会用命令行来 ...

  7. aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【基本地图的操作】

    为了更简单的演示,我们创建个.NET的ASP.NET MVC4项目 好了,上面都是后话,POI说白了,就是你的用户的数据,很多数据,不过没关系,因为你的数据如果存在百度的LBS云上,那么大数据你就不用 ...

  8. docker学习笔记 --- centos install

    Docker简介: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发 ...

  9. golang学习 ----获取URL

    package main import ( "fmt" "io/ioutil" "net/http" "os" ) fu ...

  10. MongoDB学习笔记（6）--find

    MongoDB 查询文档 MongoDB 查询文档使用 find() 方法. find() 方法以非结构化的方式来显示所有文档. 语法 MongoDB 查询数据的语法格式如下: db.collecti ...