30/05/2020——Interaction de données axios et expansion multi-pensée sélective

> app.js

# Points clés :

Trois façons de résoudre ce problème de pointage

2.

3.Opération ternaire au lieu de if else

4.méthode de traversée forEach

5.Utilisation de l'API de test JSONPlaceholder

# Implémentation de la fonction

1 .Sélectionnez toutes les extensions multi-pensées

2 Enfin complétez l'optimisation avec deux lignes de code

```

window.onload = function(){

//La première façon

//var vm = new Vue({ //Objet d'instanciation global

var vm = new Vue({

el: "# app",

données :{

listes :[],

checkAll:false, //Sélectionner tous les statuts

check:false,

},

méthodes :{

// Méthode d'écriture ES5

getLists:function(){

//Deuxième méthode (La méthode la plus couramment utilisée dans le processus de développement de projet actuel)

//Définissez cela à l'avance

//Raison : "Cela change constamment. Généralement, celui qui appelle cela désigne Qui"

var self = this;

axios({

méthodes:"get", //get post put delete | Requête ajouter modifier supprimer

url :"http://jsonplaceholder.typicode.com/users", //Adresse de l'interface

// }).then(function(res){ // Demande réussie

/ / Le troisième voie

// Raison : "Dans ES6, le this de la fonction flèche pointe vers le définisseur, qui définit vers qui cela pointe"

}).then(res=>{ // Demande réussie

console.log(res);

// Les données ne peuvent pas être restituées normalement en raison de ce problème de pointage

this.lists = res.data; / Données de rendu

// Solution

// Première méthode

//vm.lists = res.data; // Données de rendu

/ / Deuxième façon

// self.lists = res.data;

}).catch(function(error){ // Échec de la demande

console.log (erreur) ;

})

},

// Méthode d'écriture ES6

changeCheckAll(){ //Déclencheur de sélection de tout

/ / Ordinaire pour la méthode de parcours

// for( var i=0;i

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

// };

// Méthode de traversée forEach plus avancée

// cela indique la raison pour laquelle la synchronisation ne peut pas être effectuée

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

this.lists.forEach(item=>{

item.check = this.checkAll;

});

},

curChange(){

// 1. Nombre de sous-options cochées

// méthode filter() Filtre

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

// return item.check == true

// }).length;

// Fonction fléchée ES6

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

// console.log(num);

// 2. Numéro du jugement == 10 Sélectionnez tout et cochez !=10 Sélectionnez tout et décochez

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

// this.checkAll = true;

// }else{

// this.checkAll = false;

// };

// Opération ternaire au lieu de if else

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

// Optimiser each() pour renvoyer true false

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

// return item. check ;

// })

// Utilisation de la fonction flèche ES6

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

}

},

monté:fonction(){

this.getLists();

}

})

}

```

> Adresse du cas : http://jingrao.tianyuyezi.com/vue-demo/axios/index.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!