6、计算属性与侦听器（conputed、watch）

<template>
  <div id="app">
    <!-- <h1>计算属性与侦听器</h1> -->
    <!-- 1、名字 -->
    <div class="case1">
      <h1>案例一：名字</h1>
      <p>{{ firstName + lastName }}</p>
      <p>{{ name }}</p>
    </div>
    <!-- 2、购物车 -->
    <div class="case2">
      <h1>案例二：购物车</h1>
      <table border="1px">
        <thead>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>折扣</th>
          <th>总价</th>
          <th colspan="2">操作</th>
        </thead>
        <tbody>
          <tr>
            <td>{{ shopName }}</td>
            <td>{{ price }}</td>
            <td>{{ quality }}</td>
            <td>{{ discount }}</td>
            <td>{{ totalPrice }}</td>
            <td><button @click="sub">-</button></td>
            <td><button @click="add">+</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 1、名字
      firstName: "Jas",
      lastName: "mine",
      // 2、购物
      shopName: "键盘",
      price: 100,
      quality: 1,
      discount: 0.5,
    };
  },
  // 1、计算属性(computed)：多个值改变，为了得到一个结果，使用计算属性（为了得到一个值）
  computed: {
    name() {
      return this.firstName + this.lastName;
    },
    totalPrice() {
      return this.price * this.quality * this.discount;
    },
  },
  methods: {
    sub() {
      if (this.quality > 0) {
        return this.quality--;
      }
    },
    add() {
      return this.quality++;
    },
  },
};
</script>
<style scoped>
#app {
  display: flex;
  justify-content: space-around;
}
</style>

<template>
  <div id="app">
    <!-- <h1>计算属性与侦听器</h1> -->
    <!-- 1、名字 -->
    <div class="case1">
      <h1>案例一：名字</h1>
      <p>{{ firstName + lastName }}</p>
      <p>{{ name }}</p>
    </div>
    <!-- 2、购物车 -->
    <div class="case2">
      <h1>案例二：购物车</h1>
      <table border="1px">
        <thead>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>折扣</th>
          <th>总价</th>
          <th colspan="2">操作</th>
        </thead>
        <tbody>
          <tr>
            <td>{{ shopName }}</td>
            <td>{{ price }}</td>
            <td>{{ quality }}</td>
            <td>{{ discount }}</td>
            <td>{{ totalPrice }}</td>
            <td><button @click="sub">-</button></td>
            <td><button @click="add">+</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 1、名字
      firstName: "Jas",
      lastName: "mine",
      // 2、购物
      shopName: "键盘",
      price: 100,
      quality: 1,
      discount: 0.5,
      totalPrice: 0,
    };
  },
  // 1、计算属性(computed)：多个值改变，为了得到一个结果，使用计算属性（为了得到一个值）
  computed: {
    name() {
      return this.firstName + this.lastName;
    },
    // totalPrice() {
    //   return this.price * this.quality * this.discount;
    // },
  },
  // 2、侦听器(watched)：一个值的改变，影响多个值，使用侦听器（为了观察一个值）
  watch: {
    quality(value) {
      this.totalPrice = this.price * value * this.discount;
    },
  },
  methods: {
    sub() {
      if (this.quality > 0) {
        return this.quality--;
      }
    },
    add() {
      return this.quality++;
    },
  },
};
</script>
<style scoped>
#app {
  display: flex;
  justify-content: space-around;
}
</style>