【Vue.js学习笔记】17：filters,watch,计算属性的get和set

学习b站上的小马视频。

filters

在这个属性中可以定义过滤器，一般用于给视图中的data进行格式化输出。

<template>
  <div>
    <p>{{msg}}</p>
    <!--使用过滤器-->
    <p>{{msg | toUpper}}</p>
    <p>{{num | toPercentage}}</p>
  </div>
</template>

<script>
  export default {
    name: "filter",
    data() {
      return {
        msg: "hello vue",
        num: 0.3
      }
    },
    //定义过滤器
    filters: {
      toUpper(value) {
        //转大写字母
        return value.toUpperCase();
      },
      toPercentage(value) {
        //数字变成百分比字符串
        return value * 100 + '%';
      }
    }
  }
</script>

<style scoped>

</style>

运行结果：

hello vue
HELLO VUE
30%

watch

观察属性用于监视data值的变化，并进行相应的处理，有点类似于计算属性（从元数据计算出某些数据）。这里也设置一个计算属性比较一下。

<template>
  <div>
    <p>价格{{price}},含税价{{priceInTax}},折合人民币{{priceChinaRMB}}</p>
    <button @click="btnClick(10000)">加价10000</button>
  </div>
</template>

<script>
  export default {
    name: "test_watch",
    data() {
      return {
        price: 0,//这里设置为0,在组件加载时通过赋值让它发生一次变化
        priceInTax: 0,//和计算属性相比,观察属性要在data里定义一下
        // priceChinaRMB: 0
      }
    },
    //定义观察属性
    watch: {
      //这里函数名即是要监视的data,当它发生变化时调用这个函数
      price(newVal, oldVal) {
        console.log(newVal, oldVal);//输出变化后和变化前的值
        //当它的值发生变化时,重新计算衍生的两个属性的值
        this.priceInTax = Math.round(this.price * 1.08);
        // this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
      }
    },
    methods: {
      btnClick(plus) {
        //按钮按下时加价
        this.price += plus;
      }
    },
    //定义计算属性
    computed: {
      priceChinaRMB() {
        return Math.round(this.priceInTax / 16.75);
      }
    },
    //组件加载时为其赋值以触发watch和computed
    created() {
      this.price = 29980;
    }
  };
</script>

<style scoped>

</style>

运行结果：

计算属性的get和set

前面学的定义计算属性的方式都只能通过元数据得到计算属性的值，而不能直接对计算属性的值进行设置。这里通过定义get和set，get的作用就和之前的方式一样，set可以设置计算属性来改变元数据的值。

<template>
  <div>
    <p>价格{{price}},含税价{{priceInTax}},折合人民币{{priceChinaRMB}}</p>
    <button @click="btnClick(10000)">将含税价格改为10000</button>
  </div>
</template>

<script>
  export default {
    name: "computed_set",
    data() {
      return {
        price: 29980
      }
    },
    computed: {
      //这种方式可以设置计算属性的get和set
      priceInTax: {
        get() {//获取计算属性的值
          return this.price * 1.08;
        },
        set(value) {//设置计算属性的值,然后设置后的值将被作为参数传入该方法中
          //通过新设置的值来反向计算元数据的值将其写入
          this.price = value / 1.08;
        }
      },
      //这种设置计算属性的方式相当于只有get的功能
      priceChinaRMB() {
        return Math.round(this.priceInTax / 16.75);
      }
    },
    methods: {
      btnClick(newPrice) {
        this.priceInTax = newPrice;
      }
    }
  }
</script>

<style scoped>

</style>

运行结果：

点击按钮后