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. 一个正则表达式,只含有汉字、数字、字母、下划线,下划线位置不限【Z】

    1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾: ^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$ 其中: ^ 与字符串开始的地方匹配 ( ...

  2. Kubernetes 选择 IPVS

    什么是 IPVS ? IPVS (IP Virtual Server)是在 Netfilter 上层构建的,并作为 Linux 内核的一部分,实现传输层负载均衡. IPVS 集成在 LVS(Linux ...

  3. JSP、Servlet中的相对路径和绝对路径 页面跳转问题

    转自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...

  4. 安装 directx sdk 出现 S1023 解决

    造成原因: directx sdk 在安装10.0.30319 of the Visual C++ Redistributable的时候发现有一个新版本的 Microsoft Visual C++ 2 ...

  5. 转载：kafka c接口librdkafka介绍之二：生产者接口

    转载:from:http://www.verydemo.com/demo_c92_i210679.html 这个程序虽然我调试过,也分析过,但是没有记录笔记,发现下边这篇文章分析直接透彻,拿来借用,聊 ...

  6. Linux shell命令：用 !$ 防止误操作

    shell 的通配符匹配非常强大,不过也非常危险,不少同学都碰到这样的问题,比如 rm a*,结果一个手抖,a 和星号之间多了个空格,结果目录下的文件都灰飞烟灭了…… bash 支持一个特殊的变量 ! ...

  7. MySQL和ORACLE、SQL Server、PostgreSQL相比

  8. Groovy 学习手册（3）

    五. Groovy 的设计模式 设计模式是一种非常好的方式,可以使你的代码变得实用,可读又具有扩展性.跟 Java 相比,在 Groovy 里使用设计模式使代码更加简洁和容易. 1. 策略模式 设想一 ...

  9. Python——验证码识别 Pillow + tesseract-ocr

    至于安装教程在这里不再重复说了,可以参考博客,网上有大把的教程 https://blog.csdn.net/testcs_dn/article/details/78697730 要是别的验证码是如下类 ...

  10. 修改hadoop FileUtil.java，解决权限检查的问题

        在Hadoop Eclipse开发环境搭建这篇文章中,第15.)中提到权限相关的异常,如下: 15/01/30 10:08:17 WARN util.NativeCodeLoader: Una ...