这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

各位掘友们晚上好，时间过得飞快，明天又要迎来让人兴奋的周五啦，高兴之余，让我们来看下今天的主要内容 - 一个小demo来理解vue中计算属性的完整写法。

什么是vue的计算属性：

我们知道，vue是数据驱动视图，插值表达式也就是花胡子{{}}写法，可以很方便的在页面中展示我们data中定义的变量，官方文档说模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

<div id="example"> {{ message.split('').reverse().join('') }} </div>

比如官网举出的这个小例子，在插值表达式中写了大量的对数据的操作，使得结构非常的庞大，那么也就是计算属性，就可以很好的帮我们处理这些数据的操作。写法也是非常的简单：

data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }

在HTML中直接使用即可：

<p>Computed reversed message: "{{ reversedMessage }}"</p>

计算属性的完整写法

其实上面的官方demo只用到了计算属性的一个方法 -get，表面意思就是获取，今天咱们重点来说明计算属性的set方法，就是设置。

demo需求

三个input框，第一个是诗人的朝代，第二个是诗人的姓名，输入前两个第三个输入框显示前面的内容，反过来，我们在综合中更换朝代，或者诗人，前两项也自动同步更改，如图：

demo结构如下：

结构比较简单，直接上代码：

<template>
  <div>
      <div class="demo">
          <div>朝代:<el-input v-model="dynasty"> </el-input></div>
          <div>诗人:<el-input v-model="name"> </el-input></div>
      </div>
  </div>
</template>

需求分析

前两项我们通过v-model双向数据绑定，可以设置input的内容，那么第三项综合，input中不能是插值表达式的，如何实现呢，这里就要用到计算属性了，通过它，来设置前两项的结果。

  computed: {
    complete () {
      return this.dynasty + '代 诗人' + this.name
    }
  }

当然，这是就很简单的实现了我们的第一个需求，第三个输入框内显示前两项输入的结果，于是我们尝试在综合输入框内直接修改，这时候会报如下错误：

property "complete" was assigned to but it has no setter. 意思是complete 已被分配，但它没有设置器

如何解决：

这就要用到计算属性的第二个方法，set了，表面意思就是设置。

    complete: {
      get () {
        return this.dynasty + '代 诗人' + this.name
      },
      set (value) {
        [this.dynasty, this.name] = value.split('代 诗人')
      }
    }

总结

代码实现也很简单，但是注意，之前的'complete'是函数的写法，这里要变成对象写法，里面是get和set方法。

前端小白不迷路 - 一个小demo来理解vue中计算属性的完整写法

前言