用vue.js的v-for，v-if，computed写一个分页样式
在学Vue，总想写个分页，先写了一个样式。
主要看思路：
思路简单，得到总页数，判断总页数，循环。
先判断总页数是否需要分页，总页数==1页就不分了。
再判断总页数<11就不用……。
总页数>11，就要用到1…… 678 …… 末页
通过v-if 判断，通过v-for循环。
效果图：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title>
<script src="./vue.js"></script>
<script src="./axios.min.js"></script>
<style>
#app{
margin-top: 120px;
}
.pagenav{
margin: 10px;
padding: 5px;
border: 1px solid #CCCCCC;
font-size: 12px;
width: 25px;
}
.selectedpage{
background-color: #000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="app" v-if="pagenavshow"> //总页数等于1就不显示分页div了。
<p v-if="shownot"> //总页数小于11， 就不用显示……了。
<span class="pagenav" v-bind:class="{ 'selectedpage': item==curpage }" v-for=' item in sum' v-on:click='pageclick(item)'>{{item}}</span>
</p>
<p v-else>
<span class="pagenav" v-bind:class="{ 'selectedpage': item==curpage }" v-for=' item in firstsum' v-on:click='pageclick(item)'>{{item}}</span>
<span>……</span>
<span class="pagenav" v-bind:class="{ 'selectedpage': item==curpage }" v-for=' item in middlesum' v-on:click='pageclick(item)'>{{item}}</span>
<span v-if="secondpot">……</span> //当前页数小于6或者大于末页-4， 就不用显示第二个……了。
<span class="pagenav" v-bind:class="{ 'selectedpage': item==curpage }" v-for=' item in lastsum' v-on:click='pageclick(item)'>{{item}}</span>
</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
sum:100,
curpage:'1',
},
methods:{
pageclick: function(item){
this.curpage=item;
console.log(this.curpage)
}
},
computed:{
pagenavshow: function(){
if (this.sum==1){
return false;
}else{
return true;
}
},
shownot: function(){
if (this.sum<12){
return true;
}else{
return false
}
},
firstsum:function(){
if (this.curpage<6){
return [1,2,3,4,5,6,7];
}else{
return 1;
}},
middlesum:function(){
var cpage=this.curpage;
if (this.curpage<6 || this.curpage>this.sum-4){
return false;
}else{
return [cpage-2,cpage-1,cpage,cpage+1,cpage+2];
}},
lastsum:function(){
if (this.curpage<this.sum-3){
return [this.sum];
}else{
return [this.sum-5,this.sum-4,this.sum-3,this.sum-2,this.sum-1,this.sum]
}
},
secondpot: function(){
if(this.curpage<6 || this.curpage>this.sum-4){
return false;}else{
return true
}
}
}
})
</script>
</body>
</html>
用vue.js的v-for，v-if，computed写一个分页样式的更多相关文章
- vue.js移动端app实战3：从一个购物车入门vuex
什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...
- IceMx.Mvc 我的js MVC 框架 三、动手来写一个评论模块儿
介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...
- 纯JS写动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- vue.js学习总结
下面使用的命令工具为git bash 使用命令行工具搭建vue.js项目 vue.js官网命令行工具安装 为了提升安装速度,建议将 npm 的注册表源设置为国内的镜像 1.输入命令:npm insta ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js 三种方式安装
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
随机推荐
- CIKM 2013 Paper Modeling interaction features for debate side clustering
中文简单介绍:本文对怎样对网上论坛讨论中用户交互关系进行统计建模分析进行了研究. 论文出处:CIKM'13. 英文摘要: Online discussion forums are popular so ...
- （iOS）确保设置话筒模式成功 AudioSessionSetProperty
本人编写过一个应用,须要把实时音频播放出来,而且要从话筒播放声音,为此,作下面操作: //Step 1: 初始化 AudioSessionInitialize(NULL,NULL, NULL, sel ...
- springboot 使用mybatis 通用Mapper，pagehelper
首先需要maven导入需要的包,这里用的是sqlserver,druid,jtds连接数据库 <dependency> <groupId>com.alibaba</gro ...
- POJ 3189 二分+Dinic
题意: 思路: 二分跨度 枚举最低座次 建图:源点向每头牛连边权为1的边 每头牛向当前枚举的B的区间这段连上边权为1的边 所有座次向汇点连边权为牛棚容量的边 判判流量是不是等于n 一开始写得是直接枚举 ...
- Android自定义组件系列【16】——最帅气的自动滚动广告条
前一段时间要实现一个滚动的广告条,参考了一下网上许多实现,发现实现都很麻烦,所以我决定自己使用ViewFlipper来实现一个,在此将代码贴出来,与大家共享. 转载请说明出处:http://blog. ...
- Lambda表达式详细总结
(一)输入参数 在Lambda表达式中,输入参数是Lambda运算符的左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数量 ...
- 编写jsp代码时出现的红色提示线错误
将jsp页面关闭:点击"X"号,例如图中的index.jsp页面的”X"号,或者右键—“close"也可以. 双击jsp页面:重新启动页面,页面的错误提示线 ...
- centos 5的yum源无法使用的解决方法( 转载)
由于centos 5 已经停更.于是导致yum源也不能用了. 例如安装screen的时候提示 Determining fastest mirrors* base: denver.gaminghost. ...
- HypericHQ
https://sourceforge.net/projects/hyperichq-zh-cn/?source=typ_redirect
- COGS——T 7. 通信线路
http://www.cogs.pro/cogs/problem/problem.php?pid=7 ★★ 输入文件:mcst.in 输出文件:mcst.out 简单对比时间限制:1.5 ...