测试json文件：
{"qqq":{"password":"eyJtZW1iZXJMaXN0I","userId":"TestUser01"}}
fetch：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> </head> <body> <div id="app01"> <button type="button" @click="fetch_test">获取数据</button> {{data_list}} <br> {{data_list.password}} </div> <script type="text/javascript"> let vm = new Vue({ el:"#app01", data:{ data_list:[] }, methods:{ fetch_test:function(){ // 地址一定要加http://http://127.0.0.1:8848 fetch("http://127.0.0.1:8848/dome01/static/my_json.json").then(res=>{ // 将接收到的json字符串转换为json对象 return res.json() }).then(res=>{ // 从json对象当中获取数据 console.log(res.qqq) this.data_list = res.qqq }) } } }) </script> </body> </html>
axios：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 导入 --> <title></title> </head> <body> <div id="app01"> <button type="button" @click="axios_test">获取数据</button> {{data_list}} <br> {{data_list.password}} </div> <script type="text/javascript"> let vm = new Vue({ el:"#app01", data:{ data_list:[] }, methods:{ axios_test:function(){ // gei请求 axios.get("http://127.0.0.1:8848/dome01/static/my_json.json").then(res=>{ console.log(res); // axios自动包装了data属性,里面存放数据，取数据时，需要在data属性里面获取 this.data_list = res.data.qqq }).catch(err=>{ // 捕捉前一个函数的错误，如果出错，则可以获取错误信息 console.log(err); }) } } }) </script> </body> </html>