实用的计算属性小技巧

小技巧一

我们时常会碰到后端要“开始时间” - “结束时间”（分为两个变量存放），但是呢！我们使用的时间选择器的组件又只能绑定一个数组，这个时候，我们传给后端的时候需要将数组拆散，然后回显的时候又要拼接在一起，工作量不大，但是多了很多代码，也多加了一些变量。那有没有更好的办法呢！！！

<el-date-picker
   v-model="receiveDate"
   type="datetimerange"
   value-format="timestamp"
   range-separator="至"
   placeholder="领取时间"
   start-placeholder="开始时间"
   end-placeholder="结束时间">
</el-date-picker>

我们把receiveDate这个值变为计算属性,然后用计算属性get/set写法

receiveDate: {
      get: function () {
        return this.form.rSTime && this.form.rETime ? [this.form.rSTime,this.form.rETime] : "";
      },
      set: function (newVal) {
        let [rSTime, rETime] = newVal || [null, null];
        this.form.rSTime = rSTime;
        this.form.rETime = rETime;
      }
}

这里如果需要校验的话的，直接可以只校验前部分rSTime就可以了，而且校验方法还是一样的

小技巧二

在开发中还会有一种情况，也可以使用计算属性更优雅的解决

是否限制：●否 ○是 【input】

这种呢，后台往往不需要这个Boolean值，我们就需要多定义一个变量（X）来接收，切换选项的时候还需要添加方法设置input的值为特殊值。 主要是在回显的时候需要判断是否有input值再判断是否需要设置多出的变量（X）为true，或者false。有没有方便的方法呢？

<el-radio-group v-model="hasLimit" >
    <el-radio :label="false">不限</el-radio>
    <el-radio :label="true">
    限制
        <el-form-item v-if="hasLimit" prop="limit">
           <el-input v-model="form.limit" />
        </el-form-item>
   </el-radio>
</el-radio-group>

hasLimit:{
   get(){
      return this.form.limit !== -1;
   },
   set(newVal){
      this.form.limit = newVal ? '' : -1
   }
}