<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <!-- <div id="app-3"> <p v-if="seen">look at me</p> </div> --> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.quantity }} {{ todo.name}} <span v-if="todo.quantity === 0"> - OUT OF STOCK </span> </li> </ol> <h2>Total Inventory: {{ totalProducts }}</h2> </div> <!-- <script src="vue.js"></script> --> <script type="text/javascript"> // var app3 = new Vue({ // el: '#app-3', // data: { // seen : true // } // }) var app4 = new Vue({ el: '#app-4', data: { todos: [] }, computed: { totalProducts () { return this.todos.reduce((sum, todo) => { return sum + todo.quantity }, 0 ) } }, created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.todos = json.products }) } }) </script> </body> </html>
先贴代码,上面主要功能是Vue中的v-for 的条件循环 、v-if 条件判断 以及API接口JSON数据接收。
如图:
其中计算总数函数为
computed: { totalProducts () { return this.todos.reduce((sum, todo) => { return sum + todo.quantity }, 0 ) } },
接收数据:
created () { fetch('https://api.myjson.com/bins/74l63') .then(response => response.json()) .then(json => { this.todos = json.products }) }
fetch是基于Promise的,异步操作更友好,解决了多步回调,让代码更优雅友好。
网络交互推荐 axios.js (Vue官网推荐),因为Vue框架是非入侵性框架,并不限制我们使用ajax框架。