基于vue实现分页效果


Posted in Javascript onNovember 06, 2017

本文实例为大家分享了vue实现分页效果展示的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>分页练习</title>
  <script src="js/vue.js"></script>
 </head>
 <style>
  .isList{
    list-style:none;
  }
  .isPadding{
    margin:5px;
    padding:5px;
    border:2px solid gray;
  }
  .isRed{
    color:red;
  }
 </style>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <ul v-bind:class="{isList:listStyle}">
      <li v-for="(tmp,index) in pageNumbers"
      v-bind:style="{float:isFloat}" 
      v-bind:class="{isPadding:isStyle,isRed:index==pageOne}" 
      @click="changeBg(index)">{{tmp}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs",
        listStyle:true,
        isFloat:"left",
        isStyle:true,
        pageNumbers:[1,2,3,4,5],
        pageOne:0
      },
      methods:{
        changeBg:function(myIndex){
          this.pageOne = myIndex;
        }
      }
    })
  </script>
 </body>
</html>
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <style>
    ul  {
      list-style:none;
    }
    li{
      padding:10px;
      margin:5px;
      border:1px solid gray;
      float:left;
    }
    .isRed{
      color:red;
    }
  </style>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <ul>
      <li v-for="(tmp,index) in pageNumbers" v-bind:class="{isRed:index==pageNo}" @click="handleClick(index)">{{tmp}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs",
        pageNumbers:[1,2,3,4,5],
        pageNo:0
      },
      methods:{
        handleClick:function(myIndex){
          this.pageNo = myIndex;
        }
      }
    })
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
chrome原生方法之数组
2011/11/30 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
详解vue中axios请求的封装
2019/04/08 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Python 开发Activex组件方法
2009/11/08 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python遍历目录的方法小结
2016/04/28 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
python感知机实现代码
2019/01/18 Python
10个顶级Python实用库推荐
2021/03/04 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
如何写出好的Java代码
2014/04/25 面试题
环境保护与污染治理求职信
2014/07/16 职场文书
2014年超市工作总结
2014/11/19 职场文书
门店店长岗位职责
2015/04/14 职场文书
交通安全学习心得体会
2016/01/18 职场文书
筑梦中国心得体会
2016/01/18 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL