计算书的价格并输出
一法:
但是过于繁琐
使用计算属性,for循环计算书的总价
- <div id="app">
- <h2>总价格:{{totalPrice}}h2>
- div>
-
- <script src="../js/vue.js">script>
- <script>
- const app=new Vue({
- el:"#app",
- data://注意此处的花括号
- {
- books:[
- {id:110,name:"unix编程艺术",price:53},
- {id:111,name:"深入理解计算机系统",price:85},
- {id:112,name:"编程基础",price:26},
- {id:113,name:"数据结构与设计",price:34},
- ]
- },
- computed:{
- totalPrice:function ()
- {
- let result=0
- for(let i=0;i<this.books.length;i++)
- {
- result+=this.books[i].price
- }
- return result
- }
- }}
- )
- script>
es6的语法
- for(let i in this.books){}
- for(let book of this.books){}