2020-05-30——axios 데이터 상호 작용 및 선택형 다중 사고 확장

> app.js

# 핵심 사항:

1. 이 포인팅 문제를 해결하는 세 가지 방법

2. if else 대신 삼항 연산 사용

4.

5. JSONPlaceholder 테스트 API 사용

# 함수 구현

1. 모든 다중 사고 확장을 선택합니다

2. 마지막으로 두 줄의 코드로 최적화를 완료합니다.

```

window.onload = function( ){

//첫 번째 방법

//var vm = new Vue({ //전역 인스턴스화 객체

var vm = new Vue({

el:"#app",

data:{

목록: [],

checkAll:false, //선택한 모든 상태

check:false,

},

방법:{

// ES5 작성 방법

getLists:function(){

// 둘째 이 방법 (실제 프로젝트 개발 과정에서 가장 흔히 사용되는 방법)

//미리 정의해 두세요

//이유: "이것은 끊임없이 변화하고 있습니다. 일반적으로 이것을 부르는 사람은 이것을 부르는 사람을 가리킵니다."

var self = this;

axios({

메소드:"get", //get post put delete | 추가, 수정 및 삭제 쿼리

url:"http://jsonplaceholder.typicode.com/users", / /인터페이스 주소

// }).then(function(res){ // 요청 성공

// 세 번째 방법

// 이유: "ES6에서 화살표 함수의 this는 정의자를 가리킵니다. who this points to"

}).then(res=>{ // 요청이 성공했습니다

console.log(res);

// 이 포인팅 문제로 인해 데이터를 정상적으로 렌더링할 수 없습니다

this .lists = res.data; // 데이터 렌더링

// 솔루션

// 첫 번째 방법

// vm.lists = res.data; // 데이터 렌더링

// 두 번째 방법

// self.lists = res.data ;

}).catch(function(error){ // 요청 실패

console.log(error);

})

},

// ES6 작성 방법

changeCheckAll(){ // 모두 트리거 선택

// 순회 방법의 경우 일반

// for( var i=0;i

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

// };

// 더 발전된 forEach 순회 방법

// 이는 동기화가 불가능한 이유를 가리킵니다

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

this.lists.forEach(item =>{

item.check = this.checkAll;

});

},

curChange(){

// 1. 확인된 개수 sub-options

// filter() 메서드 Filter

// 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() return 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!