vue字符串参数清除data中的数据

最近一段时间,写了不少vue代码,发现有一部分数据总要在完成某些事件后要进行重置,刚开始总觉得一两个变量直接重置一下就行, 但是只要要重置的数据变多后就会显得凌乱,于是我便开始在vue全局中声明了一个重置函数,来方便我们重置数据

// 该方法用于初始化数据
Vue.prototype.resetData = function(...arr) {
				// 循环每个参数
				arr.forEach((item, index)=>{
					// 判断当前元素的类型并将该元素值设置为初始化状态
						switch (Object.prototype.toString.call(this[item])){
							case "[object String]":
								this[item] = "";
								break;
							case "[object Number]":
								this[item] = 0;
								break;
							case "[object Array]":
								this[item] = [];
								break;
							case "[object Object]":
								this[item] = {};
								break;
							case "[object Boolean]":
								this[item] = false;
								break;
						}
				})
			}

本来这个函数判断data中数据的类型来重置为该类型的初始值,但这样非该类型的数据就不可以初始化为另一种类型于是就在此基础上又拓展了一部分,可以将数据重置为指定类型

Vue.prototype.resetData = function(...arr) {
				// 循环每个参数
				arr.forEach((item, index)=>{
					// 如果时参数是字符串时
					if(Object.prototype.toString.call(item) === "[object String]") {
						// 判断当前元素的类型并将该元素值设置为初始化状态
						switch (Object.prototype.toString.call(this[item])){
							case "[object String]":
								this[item] = "";
								break;
							case "[object Number]":
								this[item] = 0;
								break;
							case "[object Array]":
								this[item] = [];
								break;
							case "[object Object]":
								this[item] = {};
								break;
							case "[object Boolean]":
								this[item] = false;
								break;
						}
					}
					// 如果参数类型为对象时
					else if(Object.prototype.toString.call(item) === "[object Object]"){
						// 找到每一项并重置为传递的任意值
						for(let key in item) {
							this[key] = item[key];
						}
					}
				})
			}

使用方法

如果要重置为当前类型的初始值可以直接写data中的属性名,如果要重置的类型为其他类型则可使用对象名+指定值的方法进项重置

export default {
		data() {
			return {
				str: 'str',
				num: 123,
				arr: [1, 2, 3],
				obj: {a: 1, b: 2, c: 3},
				NULL: 123213213213
			}
		},
		onLoad() {
			// 重置本类型
			this.resetData('str', 'num', 'arr', 'obj');
			// 重置到指定类型
			this.resetData({NULL: null});
		}
	}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵十一点半

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值