最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

vue判断是否触发点击事件

javascript 23浏览 0评论

在用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">&raquo;</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判断是否触发点击事件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址