2020-05-30——axios数据交互及全选多思维扩展

> app.js

# 重点：

1.解决this指向问题的三种方式

2.ES6箭头函数的使用

3.三目运算替代if else

4.forEach遍历方法

5.JSONPlaceholder测试api的使用

# 功能实现

1.全选多思维扩展

2.最终以两行代码完成优化

```

window.onload = function(){

//第一种方式

//var vm = new Vue({ //全局实例化对象

var vm = new Vue({

el:"#app",

data:{

lists:[],

checkAll:false, //全选的状态

check:false,

},

methods:{

// ES5 写法

getLists:function(){

//第二种方式 （实际项目开发过程中用到的最多的方式）

//提前定义this

//原因：“this是不断变化的，一般情况下由谁调用this就指向谁”

var self = this;

axios({

methods:"get", //get post put delete | 查询 添加 修改 删除

url:"http://jsonplaceholder.typicode.com/users", // 接口地址

// }).then(function(res){ // 请求成功

// 第三种方式

// 原因：“ES6中，箭头函数的this指向定义者，由谁定义this指向谁”

}).then(res=>{ // 请求成功

console.log(res);

// 由于this指向问题不能正常渲染数据

this.lists = res.data; // 渲染数据

// 解决方式

// 第一种方式

//vm.lists = res.data; // 渲染数据

//第二种方式

// self.lists = res.data;

}).catch(function(error){ // 请求失败

console.log(error);

})

},

// ES6 写法

changeCheckAll(){ //触发全选

// 普通for遍历方法

// for( var i=0;i

// this.lists[i].check = this.checkAll;

// };

// 高级一点的forEach遍历方法

// this指向原因导致不能同步

//this.lists.forEach(function(item,index){

this.lists.forEach(item=>{

item.check = this.checkAll;

});

},

curChange(){

// 1.子选项打勾的个数

// filter() 方法 筛选

 

// var num = this.lists.filter(function(item){

// return item.check == true

// }).length;

// ES6箭头函数

// var num = this.lists.filter(item => item.check).length;

// console.log(num);

// 2.判断个数 ==10  全选打勾  !=10  全选取消打勾

// if(num==this.lists.length){

// this.checkAll = true;

// }else{

// this.checkAll = false;

// };

// 三目运算 替代 if else

// num == this.lists.length ? this.checkAll = true : this.checkAll = false;

// 优化 every() 返回 true false

// this.checkAll = this.lists.every(function(item){

// return item.check;

// })

// 采用ES6箭头函数

this.checkAll = this.lists.every(item=>item.check);

}

},

mounted:function(){

this.getLists();

}

})

}

```

> 案例地址：http://jingrao.tianyuyezi.com/vue-demo/axios/index.html

以上是2020-05-30——axios数据交互及全选多思维扩展的详细内容。更多信息请关注PHP中文网其他相关文章！