用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 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
随机推荐
- 找出一堆数中最小的前K个数
描写叙述: 给定一个整数数组.让你从该数组中找出最小的K个数 思路: 最简洁粗暴的方法就是将该数组进行排序,然后取最前面的K个数就可以. 可是,本题要求的仅仅是求出最小的k个数就可以,用排序能够但显然 ...
- Visual Studio Code Setup
Windows https://code.visualstudio.com/docs/setup/windows Additional Components and Tools https://cod ...
- poj--1459--Power Network（最大流，超级源超级汇）
Power Network Time Limit: 2000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u Submit ...
- 洛谷P1200 [USACO1.1]你的飞碟在这儿
题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带走 ...
- 网站及监控利器 Pandora FMS使用体验
Pandora FMS 是一个 开源的应用程序 ,用来监测网站的各种活动,它可以收到实时的监测报告,并发送到你指定的邮箱,也可以通过e-mail, SMS 发送. 650) this.width=65 ...
- MySql免安装版绿化版安装配置，附MySQL服务无法启动解决方案
整理于:https://www.cnblogs.com/cenwei/p/6249856.html 我下载的MySQL版本是:mysql-5.6.15-winx64 一.解压文件 下载好My ...
- jquery<=======>js实现方法
http://haorooms.com/post/js_shixian_jquery
- vuex requires a Promise polyfill in this browser.--ie-vue-兼容处理日记
1.ie9+报错vuex requires a Promise polyfill in this browser. 解决如下: npm install --save-dev -polyfill 修改c ...
- vim7.4官方源码在vs2013的编译方法及问题总结
vim7.4发布也有一段时候了,也该是把之前编译的7.3重新编译一下了,于是考虑着到最新的visual studio 2013编译一下,也顺便看看有没有其它问题. 1.安装vs2013,这个应该不用说 ...
- 51nod 子序列的个数 （动规分析方法）
这道题的分析方法我很需要学习学习. 一开始我想的是f[i][j]表示前i个数子序列长度为j的个数 然后发现新加入一个数的时候会和前面的重复,这个时候不知道该怎么处理这种重复. 其实我再继续往下想就可以 ...