jQuery paging plugin code
<script src="js/vue.js"></script> <script> var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总页数 changePage:'',//跳转页 nowIndex:0 }, computed:{ show:function(){ return this.pages && this.pages !=1 }, pstart: function() { return this.current_page == 1; }, pend: function() { return this.current_page == this.pages; }, efont: function() { if (this.pages <= 7) return false; return this.current_page > 5 }, ebehind: function() { if (this.pages <= 7) return false; var nowAy = this.indexs; return nowAy[nowAy.length - 1] != this.pages; }, indexs: function() { var left = 1, right = this.pages, ar = []; if (this.pages >= 7) { if (this.current_page > 5 && this.current_page < this.pages - 4) { left = Number(this.current_page) - 3; right = Number(this.current_page) + 3; } else { if (this.current_page <= 5) { left = 1; right = 7; } else { right = this.pages; left = this.pages - 6; } } } while (left <= right) { ar.push(left); left++; } return ar; }, }, methods: { jumpPage: function(id) { this.current_page = id; }, }, }) </script>
一款带跳转功能的vue.js分页插件代码,功能全齐全的vue分页组件,vue.js使用computed计算属性,数据变动执行对应的函数分页代码。
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
![Why is `(function($) {})(jQuery);` Used in jQuery Plugin Development?](https://img.php.cn/upload/article/001/246/273/173098386351474.jpg)
07 Nov 2024
Understanding the Purpose of (function($) {})(jQuery);This code snippet represents an anonymous function that is immediately invoked with the...
![What is the purpose of the self-executing function (function($) {})(jQuery) in jQuery plugin development?](https://img.php.cn/upload/article/001/246/273/173100804333343.jpg)
08 Nov 2024
Exploring the Meaning of (function($) {})(jQuery);In the realm of jQuery plugin development, the following code snippet often confounds...
![How to Effectively Manage jQuery Plugin Dependencies in Webpack?](https://img.php.cn/upload/article/001/246/273/173306197384029.jpg)
01 Dec 2024
Managing jQuery Plugin Dependency in WebpackWhen using Webpack in complex applications, managing dependencies can become a challenge. This is...
![How to Effectively Manage jQuery Plugin Dependencies with Webpack?](https://img.php.cn/upload/article/001/246/273/173329051333272.jpg)
04 Dec 2024
How to Manage jQuery Plugin Dependencies in WebpackWhen using webpack, it's common to organize application code and libraries into separate...
![How to Animate Box-Shadow with jQuery: Plugin vs. CSS Animations?](https://img.php.cn/upload/article/001/246/273/173067450356043.jpg)
04 Nov 2024
Animating Box-Shadow with jQuery: The Right ApproachIntroductionjQuery, a popular JavaScript library, provides powerful tools for manipulating DOM...
24 Jun 2016
CSS3 JQUERY page scrolling effects code
![How can I enhance my WordPress plugin with CSS and jQuery?](https://img.php.cn/upload/article/001/246/273/173182356357552.jpg)
17 Nov 2024
Enhancing Your WordPress Plugin with Styles and Functionality: A Guide to Including CSS and jQueryIncluding CSS and jQuery in your WordPress...
![How to Customize Autocomplete Plugin Result Formatting in jQuery UI?](https://img.php.cn/upload/article/001/246/273/172946925152560.jpg)
21 Oct 2024
Customizing Autocomplete Plugin Result FormattingWhen utilizing the popular jQuery UI Autocomplete plugin, you may encounter the need to highlight specific character sequences in the drop-down results to enhance user experience. This article explains
24 Jun 2016
58 jQuery simulated CSS3 transition page switching effects
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![jQuery2019 Valentine's Day Confession Fireworks Animation Special Effects](https://img.php.cn/upload/jscode/000/000/001/5c64d3e6d92b2641.jpg)
jQuery2019 Valentine's Day Confession Fireworks Animation Special Effects
A very popular jQuery Valentine's Day confession fireworks animation special effect on Douyin, suitable for programmers and technical geeks to express their love to the girl they love. No matter you choose to be willing or not, you have to agree in the end.
![layui responsive animated login interface template](https://img.php.cn/upload/jscode/000/000/001/5a93a913de3a7571.png)
layui responsive animated login interface template
layui responsive animated login interface template
![520 Valentine's Day confession web animation special effects](https://img.php.cn/upload/jscode/000/287/557/620611f90d724550.jpg)
520 Valentine's Day confession web animation special effects
jQuery Valentine's Day Confession Animation, 520 Confession Background Animation
![Cool system login page](https://img.php.cn/upload/jscode/000/120/096/5e09903f2f0c4401.jpg)
Cool system login page
Cool system login page
![HTML5 tape music player-CASSETTE PLAYER](https://img.php.cn/upload/jscode/000/120/096/5e200ad65973d549.jpg)
HTML5 tape music player-CASSETTE PLAYER
HTML5 tape music player-CASSETTE PLAYER
![](/static/imghw/taglogo.png)