> 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中文网其他相关文章！
