Maison > Article > interface Web > 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 else4.méthode de traversée forEach5.Utilisation de l'API de test JSONPlaceholder# Implémentation de la fonction 1 .Sélectionnez toutes les extensions multi-pensées2 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!