Vue Axios异步请求
程序员文章站
2022-07-02 12:38:57
...
数据
{
"name": "shouhe",
"age": 18,
"isBoy": true,
"house": {
"location": "zhejiang",
"port": 8080,
"num": [0,1,2,3]
}
}
完整的写法：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>{{info}}</h3>
<h3>{{info.name}}</h3>
<h3>{{info.age}}</h3>
</div>
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
info: {
name: null,
isBoy: null,
age: null,
house: {
location: null,
port: null,
num: null
}
}
}
},
mounted() {
axios.get('data.json').then(response => (this.info = response.data));
}
});
</script>
</body>
</html>
简略的写法：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>{{info}}</h3>
<h3>{{info.name}}</h3>
<h3>{{info.age}}</h3>
</div>
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
info: {}
}
}
},
mounted() {
axios.get('data.json').then(response => (this.info = response.data));
}
});
</script>
</body>
</html>
上一篇： isc-dhcp性能优化的一种方法
下一篇： jq性能优化的几种方法