在Vue中,我们可以使用vue-resource或axios等第三方库来处理异步请求。这些库封装了XHR请求,并提供了更简洁的API用于发送GET、POST等请求。代码讲解
<div id="app"> <button @click="fetchData">获取数据</button> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script><script>new Vue({ el: '#app', data: { items: [] }, methods: { fetchData() { // 使用vue-resource发送GET请求 this.$http.get('/api/data') .then(response => { this.items = response.data }) .catch(error => { console.error(error) }) } }})</script>
在上述示例中,我们使用vue-resource库发送GET请求,并在请求成功后将返回的数据赋值给items数组。这样,我们就可以在模板中使用v-for指令渲染出数据列表。