1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue＋Axios获取远端数据并渲染</title>
</head>
<body>
<div id="app">
<h2>Vue＋Axios获取远端数据并渲染</h2>
<h5>数据源：https://randomuser.me/api/</h5>
<hr>
获取数据件数：<input type="text" v-model="resultCount">
<button @click="getData">提交</button>
<button @click="clear">清空</button>
<br><br>
<table border="1" width="600px">
<tr>
<th> 姓名 </th>
<th> 性别 </th>
<th> 年龄 </th>
<th> email </th>
</tr>
<tr v-for="(user, index) in users" :key="user.email">
<td> {{ user.name.first }} {{ user.name.last }} </td>
<td> {{ user.gender }} </td>
<td> {{ user.dob.age }} </td>
<td> {{ user.email }} </td>
</tr>
</table>
<span style="color: red;" v-text="errMsg"></span>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
apiUrl: "https://randomuser.me/api/",
resultCount: 5,
users: [],
errMsg: ""
},
methods: {
getData() {
axios.get(this.apiUrl, {
params: {
results: this.resultCount
}
})
.then(response => {
this.users = response.data.results
})
.catch(() => {
this.errMsg = "现在系统繁忙，请稍后再试。。。"
})
},
clear() {
this.resultCount = 5
this.users = []
this.errMsg = ""
}
}
})
</script>
</html>
|
