一.基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算
例如,礼物总数那就是计算出来的新属性
语法:
- 声明在computed配置项中,一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名 }}
<template> <!-- 目标:统计求和,求得礼物总数 --> <p>礼物清单</p> <table class="my-table"> <tr> <th>名字</th> <th>数量</th> </tr> <tr v-for="item in list" :key="item.id"> <td>{{ item.name }}</td> <td>{{ item.num }}个</td> </tr> </table> <p>礼物总数: {{ totalNum }}个</p> </template> <script setup> import { ref, computed } from 'vue'; const list = ref([ { id: 1, name: '篮球', num: 1 }, { id: 2, name: '玩具', num: 2 }, { id: 3, name: '铅笔', num: 5 }, ]); const totalNum = computed(() => { return list.value.reduce((sum, item) => sum + item.num, 0); //在计算属性的函数中,使用 list.value 访问响应式数据的实际值。 reduce 方法遍历 list 数组,并计算 num 值的总和 }); </script> <style> .my-table { border-collapse: collapse; width:100%; } .my-table th, .my-table td { border: 1px solid black; padding: 8px; text-align: left; } .my-table th { background-color: #f2f2f2; } </style>