这篇文章给大家介绍Vue如何实现点击按钮进行上下页切换,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。案例效果:完整代码如下: <template> <div
这篇文章给大家介绍Vue如何实现点击按钮进行上下页切换,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
案例效果:
完整代码如下:
<template> <div id="page"> <button class="btn" @click="prePage()">上一页</button> <ul> <li :class="selected == index ?'page1':'page'" v-for="(item,index) of pageCount" :key="index">{{item}}</li> </ul> <button class="btn" @click="nextPage()">下一页</button> </div></template> <script> export default { data() { return { pageCount: 10, //总页数 selected: 0 //已选择的页,默认开始时为第一页 //因为是与下标index作比较,所以要从0开始;0代表第一页,依次类推 } }, methods: { //上一页 prePage() { //如果已经在第一页,点击按钮页码不变并弹出提示 if (this.selected == 0) { this.selected; alert('已经是第一页!'); //否则当前页数-1 } else { this.selected = this.selected - 1; } }, //下一页 nextPage() { //如果已经在最后一页,点击按钮页码不变并弹出提示 if (this.selected == this.pageCount - 1) { this.selected; alert('已是最后一页!'); } else { //否则当前页数+1 this.selected = this.selected + 1; } } } }</script> <style scoped lang="less"> * { font-size: 14px; font-weight: nORMal; } #page { display: flex; width: 80%; margin: auto; .btn { width: 70px; height: 35px; color: white; font-weight: bold; border: 0; margin: 0 5px; } .btn:hover { cursor: pointer; } .btn:active { background-color: #787878; } } ul { list-style: none; li, .page { float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid lightskyblue; color: lightskyblue; margin: 0 3px; } .page1 { background-color: lightskyblue; color: white; } }</style>
Vue是一款友好的、多用途且高性能的javascript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的html、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
关于Vue如何实现点击按钮进行上下页切换就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
--结束END--
本文标题: Vue如何实现点击按钮进行上下页切换
本文链接: https://www.lsjlt.com/news/321358.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0