在用vue开发功能的时候,要做一个分页的组件。我们知道分页有上一页和下一页功能,当到最后一页的时候,下一页按钮应该为灰色,不可以点击。
分页效果如下:

分页效果
先看下改进前的代码:
<li class="page-item" :class="{ disabled: !paginator.isHaveNext }" @click="getArticleList(currentPage + 1)" > <a class="page-link" href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li>
其中:
1. paginator 是分页对象。
2. paginator.isHaveNext 表示是否有下一页数据。
3. disabled 样式用来置灰按钮。
4. click 事件会调用下一页的文章数据。
存在的问题
当到最后一页,按钮变成灰色后,点击按钮依旧会触发 getArticleList 方法。
解决办法:
本来一开始是想通过if判断 增加 click事件,如果有下一页才增加点击事件,但是查遍官网,vue貌似没有这种写法。
所以我就变通了一下,在点击事件处理前面增加一个是否有下一页的判断,代码如下:
<li ... @click="paginator.isHaveNext && getArticleList(currentPage + 1)" > ...
这样就可以实现了,主要是应用了短路与的知识点,当第一个判断条件为false的时候,就不会执行后面的判断了。
关于短路与,大家可以参考我之前写的JavaScript教程,运算符章节:
https://blog.csdn.net/chenjiebin/article/details/120230181?spm=1001.2014.3001.5502
有问题可以和我交流。
转载请注明:快乐编程 » vue判断是否触发点击事件