vue - 计算属性

computed（计算属性）

应用场景一

最常见的应用，就是用于处理数据字典。

比如：数据库用数字 0 和 1 表示男女，前端代码中，需要将数字 0 和 1，转换成汉字。

computed 非常适合数据格式化，当数值发生变化，数据也会重新格式化。

要实现这个效果，filter 也能做到，但是 computed 是比较推荐使用的。

<template>
  <div>
    <strong>性别</strong><span>{{genderModel}}</span>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  name: "Test",
  data() {
    return {
      gender: true
    }
  },
  computed: {
    genderModel: function () {
      return this.gender ? '女' : '男';
    }
  }
}
</script>

应用场景二

vue 的参数是单向传递的，组件无法修改 props 的值，如果需要将 props 绑定到 v-model，可以通过 computed 进行处理。

这在自定义组件过程中，应用次数非常多。

<template>
  <div>
    <el-input v-model="valueModel"></el-input>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  name: "Test",
  props: {
    value: {type: String, default: 'text'}
  },
  computed: {
    valueModel: {
      get: function () {
        return this.value;
      }, set: function (val) {
        // 处理值变化
      }
    }
  }
}
</script>