用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 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
随机推荐
- 最简单的HTML5游戏——贪吃蛇
<html> <head> <meta charset="UTF-8"/> <title>贪吃蛇</title> < ...
- POJ 3150 Cellular Automaton(矩阵高速幂)
题目大意:给定n(1<=n<=500)个数字和一个数字m,这n个数字组成一个环(a0,a1.....an-1).假设对ai进行一次d-step操作,那么ai的值变为与ai的距离小于d的全部 ...
- rgba
正反两面展示效果 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- .Net中字典的使用
/// <summary> /// 获取用户市信息 /// </summary> /// <param name="CustomerId">&l ...
- thinkphp里面使用原生php
thinkphp里面使用原生php Php代码可以和标签在模板文件中混合使用,可以在模板文件里面书写任意的PHP语句代码 ,包括下面两种方式: 使用php标签 例如: {php}echo 'Hello ...
- scikit-learn 为机器学习
如何使用 scikit-learn 为机器学习准备文本数据 欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 文本数据需要特殊处理,然后才能开始将其用于预测建模. 我们需要解析文本,以删除被 ...
- 计算文件大小（C/C++语言）
#include <stdio.h> int main() { FILE* fp; if (fp = fopen("read files.exe", "r&q ...
- android学习笔记二、Activity深入学习
一.创建和使用: 1.Activity是android的四大组件之一,需要继承Activity并在清单文件中进行声明才能使用.没有声明则报错. 2.启动Activity是通过Intent,有两种方式: ...
- OPENCV(2) —— Basic Structures（一）
DataType A primitive OpenCV data type is one of unsigned char, bool,signed char, unsigned short, sig ...
- Java经典算法案例
笔试中的编程题3 JAVA经典算法40例[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? ...