09 计算属性和监听器

1.计算属性 computed

计算属性就是一些数据处理 放在computed中

直接当做普通属性调用不加括号

任何data中数据变化立即重新计算

计算属性会缓存

<template>
  <div>
    <p>姓名:{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fristname: "张",
      lastname: "三",
    };
  },
  computed: {
    name() {
      return this.fristname + lastname;
    },
  },
};
</script>

2.监听器 watch

监听器 中的方法 为data中的变量名 ，括号中的返回值为变量名修改后的值

一般当一个值引起多个值改变的时候用监听器

多个值引起一个值改变时用computed

<template>
  <div>
    <p>单价:{{ armb }}</p>
    <div>
      <button @click="change(1)">-</button>
      <p>数量:{{ age }}</p>
      <button @click="change(2)">+</button>
    </div>
    <P>总价:{{ all }}</P>
  </div>
</template>

<script>
export default {
  data() {
    return {
      armb: 20,
      age: 0,
      all: 0,
    };
  },
  methods: {
    change(m) {
      console.log(m);
      if (m == 2) {
        this.age++;
      } else {
        this.age--;
      }
    },
  },
  watch: {
    age(age) {
      this.all = this.armb * age;
    },
  },
};
</script>