<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));
};
标签：Vue,return,七种,price,累加,item,books,let,total From： https://www.cnblogs.com/Fooo/p/18026571