ホームページ > 記事 > ウェブフロントエンド > 2020-05-30——axios データインタラクションと全選択のマルチシンキングの拡張
2020-05-30——axios データインタラクションと全選択のマルチシンキングの拡張
- A 枕上人如玉、オリジナル
- 2020-05-30 14:49:47192ブラウズ
> app.js
# 重要なポイント:
1. このポインティングの問題を解決する 3 つの方法
3. forEach トラバーサル メソッドの代わりに ES6 のアロー関数を使用する
4.
5. JSONPlaceholder テスト API の使用
1. すべてのマルチシンキング拡張機能を選択します
2. 最後に 2 行のコードで最適化を完了します
```
window.onload = ){
//最初の方法
//var vm = new Vue({ //グローバルインスタンス化オブジェクト
var vm = new Vue({
el:"#app",
data:{
lists: [],
checkAll:false, //すべての選択状態
check:false,
},
methods:{
// ES5の書き込みメソッド
getLists:function(){
// 2番目のこのメソッド (実際のプロジェクト開発プロセスで最も一般的に使用されるメソッド)
//これを事前に定義してください
//理由: 「これは常に変化しています。一般に、これを呼び出した人はこれを呼び出した人を指します」
var self = this;
axios({
methods:"get", //get post put delete | 追加、変更、削除するクエリ
url:"http://jsonplaceholder.typicode.com/users", / /インターフェースアドレス
// }).then(function(res){ // リクエストは成功しました
// 第三の方法
// 理由: 「ES6 では、アロー関数の this は定義者を指します。これが指す人"
}).then(res=>{ // リクエストは成功しました
console.log(res);
// このポインティングの問題により、データは正常にレンダリングできません
this .lists = res.data; // データのレンダリング
// 解決策
// 最初の方法
// vm.lists = res.data; // データのレンダリング
// 2 番目の方法
// 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 中国語 Web サイトの他の関連記事を参照してください。