axios請求數據獲取json方法 · vue

axios請求PHP發過來的JSON方法 # 方法1： ~~~ getDate:function (){ var that=this; //window轉換為vue axios.get('http://127.0.0.1/index.php').then(function (res){ that.user=res.data.name; //name為PHP端的JSON鍵 user為要輸出的VUE里自定義的變量 console.log(that.user) //打印輸出到控制臺把數值 }) ~~~ ## 代碼案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div id="app"> <button type="button" @click="getDate">獲取數據</button> <p>{{user}}</p> </div> </body> </html> <script type="text/javascript"> var vm= new Vue({ el:'#app', data:{ user:'1223' }, methods:{ getDate:function (){ var that=this; //window轉換為vue axios.get('http://127.0.0.1/index.php').then(function (res){ that.user=res.data.name; //name為PHP端的JSON鍵 console.log(that.user) //打印輸出到控制臺把數值 }) }, } }) </script> ~~~ # 方法2利用箭頭函數： ~~~ getDate:function (){ var that=this; //window轉換為vue axios.get('http://127.0.0.1/index.php').then(res=>{ //箭頭函數方法 that.user=res.data.name; //name為PHP端的JSON鍵 user為要輸出的VUE里自定義的變量 console.log(that.user) //打印輸出到控制臺把數值 }) ~~~ ## 代碼案例： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div id="app"> <button type="button" @click="getDate">獲取數據</button> <p>{{user}}</p> </div> </body> </html> <script type="text/javascript"> var vm= new Vue({ el:'#app', data:{ user:'1223' }, methods:{ getDate:function (){ var that=this; //window轉換為vue axios.get('http://127.0.0.1/index.php').then(res=>{ //箭頭函數方法 that.user=res.data.name; //name為PHP端的JSON鍵 console.log(that.user) //打印輸出到控制臺把數值 }) }, } }) </script> ~~~