Vue——计算属性

computed（计算属性）

应用场景一

很容易联想到的是 “数据字典”，比如：数 “0” 和 “1” 显示为 “男” 跟 “女”，这时候用 computed 就非常合适，
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 的值是无法改变的，如果需要绑定到 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>