> 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// 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中文網其他相關文章！
