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. Node.js的一些基本概念

    1. Node.js简介 1.1 Node.js是什么 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个能够在服务器端运行JavaScript的开放源代码.跨 ...

  2. SpringMVC框架学习

    2012-03-21 衡量一个MVC框架模式,主要通过三种web模式,本人认为springMVC是一个很好的MVC 模式,对模式的支持如下: (1)派遣器模式 Spring有一个统一集中的派遣器org ...

  3. 可扩展的Web系统和分布式系统（Scalable Web Architecture and Distributed Systems）

    Open source software has become a fundamental building block for some of the biggest websites. And a ...

  4. 谈谈选用技术的原则，技术学习方法技巧，阅读代码的技巧及其它 MSF的一点心得

    谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...

  5. C结构体数组的应用

    #include <stdio.h> //定义结构体存储学生成绩信息 struct address_list{ ]; ]; ]; } info[]; void save(char *nam ...

  6. 【Redis】解析Redis和Java传递数据

    在Java中使用Redis之前需要导入 jedis.jar 包,由于Redis是基于key-value进行数据存储,java中的数据存储到Redis中有许多方式,这里笔者介绍采用JSON字符串和对象序 ...

  7. 【jsp】怎么在jsp文件中引入静态文件(.js .css)

    如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...

  8. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  9. numpy 切片

    numpy 中的切片与数组中的切片类似. 数组 [ 起始:终止:步长, 起始:终止:步长, ... ] 所有的切片操作(无论是步长为+的正序,还是步长为 - 的逆序)都是开始位置包含,结束位置不包含( ...

  10. root目录空间不够的问题

    今天导入mysql表的时候,提示write file error /tmp/xxx 原因是表太大,创建临时表的时候,tmp目录不够空间了. 找到一个解决方法: 使用 mount --bind moun ...