2020-05-30——axios data interaction and select-all multi-thinking expansion

> app.js

# Key points:

1. Three ways to solve this pointing problem

2. The use of ES6 arrow functions

3.Ternary operation instead of if else

4.forEach traversal method

5.Usage of JSONPlaceholder test api

# Function implementation

1 .Select all multiple thinking expansion

2.Finally complete the optimization with two lines of code

```

window.onload = function(){

//The first way

//var vm = new Vue({ //Global instantiation object

var vm = new Vue({

el:"# app",

data:{

lists:[],

checkAll:false, //All-selected status

check:false,

},

methods:{

// ES5 writing method

getLists:function(){

//The second way (The most commonly used method in the actual project development process)

//Define this in advance

//Reason: "This is constantly changing. Generally, whoever calls this points to Who"

var self = this;

axios({

methods:"get", //get post put delete | Query add modify delete

url:"http://jsonplaceholder.typicode.com/users", //Interface address

// }).then(function(res){ //Request successful

/ / The third way

// Reason: "In ES6, the this of the arrow function points to the definer, who defines who this points to"

}).then(res=>{ // Request successful

console.log(res);

// Data cannot be rendered normally due to this pointing problem

this.lists = res.data; // Rendering Data

// Solution

// First way

//vm.lists = res.data; // Rendering data

/ /Second way

// self.lists = res.data;

}).catch(function(error){ // Request failed

console.log (error);

})

},

// ES6 writing method

changeCheckAll(){ //Trigger select all

// Ordinary for traversal method

// for( var i=0;i

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

// };

// A more advanced forEach traversal method

// this points to the reason why synchronization cannot be performed

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

this.lists.forEach(item=>{

item.check = this.checkAll;

});

},

curChange(){

// 1. Number of checked sub-options

// filter() method Filter

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

// return item.check == true

// }).length;

// ES6 arrow function

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

// console.log(num);

// 2. Judge the number == 10 Select all and check !=10 Select all and uncheck

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

// this.checkAll = true;

// }else{

// this.checkAll = false;

// };

// Ternary operation instead of if else

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

// Optimize every() to return true false

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

// return item. check;

// })

// Using ES6 arrow function

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

}

},

mounted:function(){

this.getLists();

}

})

}

```

> Case address: http://jingrao.tianyuyezi.com/vue-demo/axios/index.html

The above is the detailed content of 2020-05-30——axios data interaction and select-all multi-thinking expansion. For more information, please follow other related articles on the PHP Chinese website!