1. Uso básico
Defina una función en calculado (parece una función, pero en realidad es un atributo) y asígnele un nombre según la especificación del atributo.
2. Escenarios de aplicación
Cuando la lógica de datos de A es muy compleja, escriba los datos A en el atributo calculado. Por ejemplo, pago con carrito de compras.
3. Valor
Para funciones con un valor de retorno, el atributo calculado a se usa de la misma manera que los datos en data. Los atributos calculados se definen en calculado y no es necesario definirlos en los datos. Se pueden usar directamente en la plantilla de la misma manera que los datos definidos en los datos.
Simplemente llame a this.totalPrice directamente en los métodos
<template>
<div>
<div>{
{ totalPrice }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, price: 10 },
{ id: 2, price: 20 },
{ id: 3, price: 40 },
],
};
},
// 计算属性
computed: {
totalPrice() {
var sum = 0;
for (let i = 0; i < this.list.length; i++) {
sum += this.list[i].price;
}
return sum;
},
},
};
</script>