computed: { total: function() { // TODO：：下面补充代码，完成计算购买价 }, sum: function() { // TODO：：下面补充代码，完成计算包括运费在内的总价，购买价大于100免运费 } }

如果你需要在一个Vue组件中添加`computed`属性，用于计算购买价和总价，可以使用以下代码：

Vue.component('my-component', {
  // ...
  computed: { 
    total: function() {
      return this.price * (1 - this.discount);
    },
    sum: function() {
      let total = this.price * this.quantity * (1 - this.discount);
      if (total > 100) {
        return total;
      } else {
        return total + this.shippingCost;
      }
    }
  }
});

在上述代码中，`total`和`sum`都是通过Vue的计算属性来实现的。`total`计算了购买价：它将原价 `price` 乘以折扣 `discount` 所得到的值作为结果。`sum`计算了总价：它首先计算购买价，然后根据购买价和运费 `shippingCost` 的总和来返回最终结果。如果购买价大于100，就不需要加上运费；否则，需要将运费加上。

相关问题

axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 }, //编辑处理 toEdit: async function (id) { }, deleteBook: async function (id) { }, queryBooks: async function () { } }, computed:{ total: function () { } }, watch: { name: function (val) { } }, mounted:function () { } });请完善代码

根据你的代码，我来完善一下：

axios.defaults.baseURL = 'http://localhost:8080/book/';
var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    bookName: '',
    flag: false,
    submitFlag: false,
    books: []
  },
  methods:{
    handle: async function () {
      // 编辑
      if (this.id) {
        try {
          const response = await axios.put(this.id, {
            bookName: this.bookName
          });
          if (response.status === 200) {
            this.submitFlag = true;
            this.books = await this.queryBooks();
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        // 新增
        try {
          const response = await axios.post('', {
            bookName: this.bookName
          });
          if (response.status === 200) {
            this.submitFlag = true;
            this.books = await this.queryBooks();
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    // 编辑处理
    toEdit: async function (id) {
      try {
        const response = await axios.get(id);
        if (response.status === 200) {
          this.id = id;
          this.bookName = response.data.bookName;
          this.flag = true;
        }
      } catch (error) {
        console.log(error);
      }
    },
    deleteBook: async function (id) {
      try {
        const response = await axios.delete(id);
        if (response.status === 200) {
          this.books = await this.queryBooks();
        }
      } catch (error) {
        console.log(error);
      }
    },
    queryBooks: async function () {
      try {
        const response = await axios.get('');
        if (response.status === 200) {
          return response.data;
        }
      } catch (error) {
        console.log(error);
      }
      return [];
    }
  },
  computed:{
    total: function () {
      return this.books.length;
    }
  },
  watch: {
    bookName: function (val) {
      if (val) {
        this.flag = false;
        this.id = '';
      }
    }
  },
  mounted:function () {
    this.books = this.queryBooks();
  }
});

这是一个用 Vue 和 Axios 实现的简单的书籍管理系统，包含了增删改查等功能。其中，`handle` 方法用来新增或编辑书籍，`toEdit` 方法用来编辑书籍，`deleteBook` 方法用来删除书籍，`queryBooks` 方法用来查询所有书籍，`total` 计算属性用来计算书籍总数，`watch` 用来监听书名输入框的变化，`mounted` 生命周期钩子用来初始化数据。

axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 }, //编辑处理 toEdit: async function (id) { }, deleteBook: async function (id) { //第一种方法 /*var index = this.books.findIndex(function (item) { return item.id == this.id; }); this.books.splice(index,1);*/ // 第二种方法：通过filter方法进行删除 /*this.books = this.books.filter(function (item) { return item.id !== id; });*/ }, queryBooks: async function () { } }, computed:{ total: function () { } }, watch: { name: function (val) { } }, mounted:function () { } });请完善代码

根据您的代码，我看到您正在使用Vue.js和axios来构建一个图书管理系统前端页面。下面是完善后的代码：

axios.defaults.baseURL = 'http://localhost:8080/book/';

var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    bookName:'',
    flag: false,
    submitFlag: false,
    books: []
  },
  methods:{
    handle: async function () {
      //编辑
      var book = {
        id: this.id,
        bookName: this.bookName
      };
      await axios.put(book.id, book);
      await this.queryBooks();
      this.id = '';
      this.bookName = '';
      this.flag = false;
    },
    //编辑处理
    toEdit: async function (id) {
      var response = await axios.get(id);
      this.id = response.data.id;
      this.bookName = response.data.bookName;
      this.flag = true;
    },
    deleteBook: async function (id) {
      //第一种方法
      /*var index = this.books.findIndex(function (item) {
          return item.id == this.id;
      });
      this.books.splice(index,1);*/

      //第二种方法：通过filter方法进行删除
      /*this.books = this.books.filter(function (item) {
          return item.id !== id;
      });*/
      await axios.delete(id);
      await this.queryBooks();
    },
    queryBooks: async function () {
      var response = await axios.get();
      this.books = response.data;
    }
  },
  computed:{
    total: function () {
      return this.books.length;
    }
  },
  watch: {
    name: function (val) {
      console.log(val);
    }
  },
  mounted:function () {
    this.queryBooks();
  }
});

这个代码中，我添加了一些新的方法和功能：

1. `handle()` 方法用于编辑图书信息，它发送 PUT 请求到后端 API 来更新图书信息，并且在更新后重新查询所有的图书信息。

2. `toEdit()` 方法用于在编辑按钮被点击时，获取特定的图书信息并在表单里面显示出来。

3. `deleteBook()` 方法用于删除特定的图书信息，它发送 DELETE 请求到后端 API 并且在删除成功后重新查询所有的图书信息。

4. `queryBooks()` 方法用于查询所有的图书信息，它发送 GET 请求到后端 API 并且将结果保存到 `books` 数组中。

5. `mounted()` 生命周期钩子用于在页面加载时调用 `queryBooks()` 方法来初始化所有的图书信息。

希望这个完善后的代码可以帮助您完成您的图书管理系统。