java+vue滑动代码
时间: 2023-09-08 13:10:25 浏览: 42
以下是一个简单的Java和Vue.js结合的滑动代码示例:
Java代码:
```java
@GetMapping("/items")
public List<Item> getItems(@RequestParam("page") int page, @RequestParam("pageSize") int pageSize) {
List<Item> items = itemService.getItems(page, pageSize);
return items;
}
```
Vue代码:
```vue
<template>
<div>
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
<button v-if="page > 1" @click="previousPage">Previous</button>
<button v-if="items.length === pageSize" @click="nextPage">Next</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
page: 1,
pageSize: 10,
};
},
methods: {
getItems() {
fetch(`/items?page=${this.page}&pageSize=${this.pageSize}`)
.then((response) => response.json())
.then((items) => (this.items = items));
},
previousPage() {
this.page--;
this.getItems();
},
nextPage() {
this.page++;
this.getItems();
},
},
mounted() {
this.getItems();
},
};
</script>
```
这个示例中,Java代码提供了一个获取商品列表的API,并接受page和pageSize作为参数,表示要获取的页码和页大小。Vue组件使用fetch API调用Java API,然后通过v-for指令渲染商品列表,并使用两个按钮分别调用previousPage和nextPage方法来切换页码。