（1）请使用vue的循环指令v-for和计算属性处理如下的数组，并输出下图的结果。要求输出数组的信息，计算出所有书籍的总价和平均价格

在Vue.js中，你可以使用`v-for`指令遍历数组，结合计算属性（Computed Properties）来动态计算总价和平均价格。假设我们有一个包含书籍信息的数组，每个对象有`title`和`price`两个属性：

<template>
  <div>
    <ul>
      <li v-for="book in books" :key="book.id">
        {{ book.title }} - 价格: {{ book.price }}
      </li>
    </ul>

    <!-- 计算总价 -->
    总价: {{ totalPrice }}

    <!-- 计算平均价格 -->
    平均价格: {{ averagePrice }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: '书1', price: 20 },
        { id: 2, title: '书2', price: 30 },
        { id: 3, title: '书3', price: 40 }
      ]
    };
  },
  computed: {
    // 总价计算
    totalPrice() {
      let total = 0;
      this.books.forEach(book => (total += book.price));
      return total;
    },

    // 平均价格计算
    averagePrice() {
      if (this.books.length > 0) {
        return this.totalPrice / this.books.length;
      } else {
        return 0; // 或者抛出异常，避免除以零错误
      }
    }
  }
};
</script>

在这个例子中，`v-for`用于遍历数组并显示每本书的标题和价格，而`totalPrice`和`averagePrice`计算属性会根据数据实时更新。