一、JSON对象过滤数据(处理复杂数据时可以直接在内部过滤掉)
封装方法:
function getTargetObject(targetObject, propsArray){if(typeof(targetObject) !=="object"|| !Array.isArray(propsArray)) {thrownewError("参数格式不正确"); }constresult = {};Object.keys(targetObject).filter(key=>propsArray.includes(key)).forEach(key=>{ result[key] = targetObject[key]; })returnresult;}
使用方法:
let arr = {a: '1', b:'2', c: '3'}
getTargetObject(arr, ['a', 'b'])
引用网站:https://segmentfault.com/q/1010000016133960/a-1020000016134570
二、数组切割(当后端传来数据过多的时候,将数据切成几个等分,用户下拉的时候再展示)
* 将一个数组分成几个同等长度的数组 * array[分割的原数组] * size[每个子数组的长度]
*/functionsliceArray(array, size) {
varresult = [];
for(varx = 0; x < Math.ceil(array.length / size); x++) {
varstart = x * size;
varend = start + size;
result.push(array.slice(start, end));
} returnresult }
三、数据过滤(使用JSON.stringify方法)
数据: persons: [
{apple: '苹果'},
{watermelon: '西瓜'},
{lemon: '柠檬'},
{Blueberry: '蓝莓'},
{orange: '橙子'}],
方法: handChange() {
let oneFruits = JSON.stringify(this.persons, function (inx, ite) {
if (inx === 'watermelon' || inx === 'orange') {
return undefined
} else {
return ite } })
this.persons = JSON.parse(oneFruits) }
结果:
四、通过$set给数据注入值并更新视图(解决在vue中新增数据不更新视图的问题)
数据: persons: [
{id: '1',name: '苹果'},
{id: '2',name: '西瓜'},
{id: '3',name: '柠檬'},
{id: '4',name: '蓝莓'} ]
方法: handChange() {
let oneFruits = JSON.parse(JSON.stringify(this.persons[0]))
let twoFruits = JSON.parse(JSON.stringify(this.persons[1]))
let newFruits = {id: '5', name: '葡萄'}
console.log(twoFruits)
this.$set(this.persons, 1, oneFruits) // 将西瓜的位置放上苹果
this.$set(this.persons, 0, twoFruits) // 将苹果的位置方式西瓜
this.$set(this.persons, 4, newFruits) // 添加葡萄并更新视图
console.log(this.persons) }
结果:
网友评论