vue实用的计算属性小技巧

发布时间:2021-06-23 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了vue实用的计算属性小技巧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

小技巧一

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

<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

}

}

总结


以上是前端之家为你收集整理的vue实用的计算属性小技巧全部内容,希望文章能够帮你解决vue实用的计算属性小技巧所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。