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){

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