<body> <div id="app"> <h2>总价:{{totalPrice}}</h2> </div> <script> const vm = new Vue({ el: "#app", data() { return { books: [ { id: 110, name: "JavaScript从入门到入土", price: 119 }, { id: 111, name: "Java从入门到放弃", price: 80 }, { id: 112, name: "编码艺术", price: 99 }, { id: 113, name: "代码大全", price: 150 }, ] } }, //原始方法 /* computed:{ totalPrice(){ let total = 0; for(let i = 0;i < this.books.length;i++){ total += this.books[i].price; } return total; } } */ //for...in可枚举的 /* computed:{ totalPrice(){ let total = 0; for(let i in this.books){ total += this.books[i].price; } return total; } } */ //for...of可迭代的 /* computed:{ totalPrice(){ let total = 0; for(let item of this.books){ total += item.price; } return total; } } */ // forEach /* computed:{ totalPrice(){ let total = 0; this.books.forEach(item => { total += item.price; }); return total; } } */ //map方法,对数组元素进行操作,返回一个新的数组 /* computed: { totalPrice() { let total = 0; this.books.map(item => { total += item.price; }) return total; } } */ //对数组元素进行筛选,返回一个新的数组 /* computed:{ totalPrice(){ let total = 0; this.books.filter(item=>{ total+=item.price; }) return total; } } */ //total初始值,没有初始值就是数组的第一个元素,item现在项,累加器。 computed: { totalPrice() { return this.books.reduce((total, item) => { return total + item.price }, 0) } } }) </script> </body>
//js代码 <script> export default { components: {}, props: [], data() { return { "amount": 1000,//模拟数据总金额 "form": { "items": [] } } }, computed: {}, watch: {}, created() {}, beforeMount() {}, mounted() { let list = [{//模拟数据源 name: "和平区", index: 0, fund: 0, scale: 0 }, { name: "沈河区", index: 1, fund: 0, scale: 0 }] this.form.items = list }, destroyed() {}, methods: { commit() { //提交表单时 通过reduce函数计算各个区县的总金额 以及实现后续校验 let total = this.form.items.reduce((sum, item) => sum + Number(item.fund || 0), 0); console.log(total) }, //通过填入金额计算比例 applyScale(index, fund) { this.form.items[index].scale = (fund / this.amount * 100).toFixed(2) }, }, config: {} } </script>
const QualityData = ref([]); const QualitySum1 = ref(); const QualitySum2 = ref(); const get_QualityManagement = async () => { const param = { year: year, }; const _data = await getQualityManagement(param); const { data } = _data; QualityData.value = data; QualitySum1.value = data.special.reduce((total, num) => { return total + num }); QualitySum2.value = data.aclass.reduce((total, num) => { return total + num }); //console.log('QualitySum1>>>' + JSON.stringify(QualitySum1)); };