30.05.2020 – Axios-Dateninteraktion und Select-All-Multi-Thinking-Erweiterung

> app.js

# Wichtige Punkte:

Drei Möglichkeiten, dieses Zeigeproblem zu lösen

Die Verwendung von ES6-Pfeilfunktionen

3.Ternäre Operation statt if else

4.forEach-Traversal-Methode

5.Verwendung der JSONPlaceholder-Test-API

# Funktionsimplementierung

1 .Wählen Sie alle Multi-Thinking-Erweiterungen aus

2. Schließen Sie abschließend die Optimierung mit zwei Codezeilen ab

```

window.onload = function(){

//Der erste Weg

//var vm = new Vue({ //Globales Instanziierungsobjekt

var vm = new Vue({

el: "# app",

data:{

listen:[],

checkAll:false, //Alle Status auswählen

check:false,

},

Methoden:{

// ES5-Schreibmethode

getLists:function(){

//Zweiter Weg (Die am häufigsten verwendete Methode im eigentlichen Projektentwicklungsprozess)

//Definieren Sie dies im Voraus

//Grund: „Das ändert sich ständig. Im Allgemeinen zeigt derjenige, der dies aufruft, auf „Wer““

var self = this;

axios({

methoden:"get", //get post put delete | Abfrage hinzufügen ändern löschen

url :"http://jsonplaceholder.typicode.com/users", //Schnittstellenadresse

// }).then(function(res){ // Anfrage erfolgreich

/ / Die dritter Weg

// Grund: „In ES6 zeigt die Pfeilfunktion auf den Definierer, der definiert, auf wen dies zeigt“

}).then(res=>{ // Anfrage erfolgreich

console.log(res);

// Daten können aufgrund dieses Zeigeproblems nicht normal gerendert werden

this.lists = res.data; / Daten rendern

// Lösung

// Erster Weg

//vm.lists = res.data; // Daten rendern

/ / Zweiter Weg

// self.lists = res.data;

}).catch(function(error){ // Anfrage fehlgeschlagen

console.log (Fehler) ;

})

},

// ES6-Schreibmethode

changeCheckAll(){ //Trigger select all

/ / Gewöhnlich für Traversal-Methode

// for( var i=0;i

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

// };

// Fortgeschrittenere forEach-Traversal-Methode

// Dies weist auf den Grund hin, warum die Synchronisierung nicht durchgeführt werden kann

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

this.lists.forEach(item=>{

item.check = this.checkAll;

});

},

curChange(){

// 1. Anzahl der geprüften Unteroptionen

// filter() Methode Filter

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

// return item.check == true

// }).length;

// ES6-Pfeilfunktion

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

// console.log(num);

// 2. Urteilsnummer == 10 Alle auswählen und aktivieren !=10 Alle auswählen und deaktivieren

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

// this.checkAll = true;

// }else{

// this.checkAll = false;

// };

// Ternäre Operation statt if else

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

// Every() optimieren, um true false zurückzugeben

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

// item zurückgeben. check ;

// })

// Verwendung der ES6-Pfeilfunktion

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

}

},

mounted:function(){

this.getLists();

}

})

}

```

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

Das obige ist der detaillierte Inhalt von30.05.2020 – Axios-Dateninteraktion und Select-All-Multi-Thinking-Erweiterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!