1.
2, Cart.json
{ "message": "", "status": "1", "result": { "Totalmoney": 0, "productlist": [ { " ProductId ":" 10001 ", " productName ":" Yellow crane tower Cigarettes ", " productprice ": +, " productquentity ": 1, " Productimage ":" Goods-1.jpg ", " parts ": [ { " partsid ":" a001 ", " partsname ":" Lighter " }, { "Partsid": "a002", "Partsname": "XXX" } ] }, { "productId": "10002", " ProductName ":" Add more Treasure ", " Productprice ": 8, " productquentity ": 1, " productimage ":" Goods-2.jpg ", " Parts ": [ { " partsid ":" a001 ", " Partsname ":" Eyedropper " } ] }, { " productId ":" 10003 ", " ProductName ":" Headphones ", " Productprice ":" productquentity ": 1," productimage ":" Ear.jpeg ", " parts ": [] } ] }}
3, index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0"> <title>Title</title></Head><Body><DivID= "App"><!---
<!--v-for Gets the child element item in the ProductList collection, gets the property of item in item, or gets the child element of item--
<Liv-for= "Item in ProductList"> <Div>Product Name: {{Item.productname}}</Div> <DDv-for= "part in Item.parts"V-text= "Part.partsname"></DD> <Div>Price: {{Item.productprice}}</Div> </Li></Div><Scriptsrc= "Js/lib/vue.min.js"></Script><Scriptsrc= "Js/lib/vue-resource.min.js"></Script><Scriptsrc= "Js/cart.js"></Script></Body></HTML>
4, Cart.js
/** * Created by KK on 2017/4/16.*/varVM =NewVue ({el:"#app", data:{//title: "Hello Vue"totalmoney:0, productlist:[]}, filters:{}, mounted:function () { //similar to the Ready method in jquery 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 is a layer of the Vue package _this.totalmoney=Res.body.result.totalMoney; });} }});
Vue.js Request data V-for cycle usage data