利用vue接收学生json数据并显示
时间: 2023-05-19 16:04:16 浏览: 167
可以使用以下代码来利用 Vue 接收学生 JSON 数据并显示:
HTML 代码:
```
<div id="app">
<ul>
<li v-for="student in students">
{{ student.name }} - {{ student.age }}
</li>
</ul>
</div>
```
Vue 代码:
```
new Vue({
el: '#app',
data: {
students: []
},
mounted() {
axios.get('/students.json')
.then(response => {
this.students = response.data
})
.catch(error => {
console.log(error)
})
}
})
```
其中,`axios` 是一个用于发送 HTTP 请求的库,可以使用 `npm install axios` 命令进行安装。`/students.json` 是一个包含学生信息的 JSON 文件,可以根据实际情况进行修改。
阅读全文