使用vue写一个页面局部刷新的代码
时间: 2023-06-08 16:03:50 浏览: 69
好的,以下是使用 Vue 实现局部刷新的示例代码:
```html
<template>
<div>
<h1>{{title}}</h1>
<button @click="loadData">点击加载数据</button>
<hr>
<p v-if="isLoading">数据正在加载中,请稍候...</p>
<div v-else>
<p v-for="item in data" :key="item.id">{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '局部刷新示例',
isLoading: false,
data: []
}
},
methods: {
loadData() {
this.isLoading = true
axios.get('/api/data')
.then(res => {
this.data = res.data
this.isLoading = false
})
.catch(err => {
console.error(err)
this.isLoading = false
})
}
}
}
</script>
```
以上代码使用了 Vue 的数据绑定、条件渲染等特性,通过点击按钮加载数据,并在加载过程中显示 loading 动画,数据加载完成后以列表形式展示到页面上,实现了局部刷新的效果。