基于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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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
牡丹941资料
2021/03/01 无线电
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
js实现楼层导航功能
2017/02/23 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python多线程扫描端口示例
2014/01/16 Python
python实现杨辉三角思路
2017/07/14 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
财务管理专业毕业生求职信范文
2013/09/21 职场文书
工商管理专业实习生自我鉴定
2013/09/29 职场文书
会计专业自我鉴定范文
2013/10/06 职场文书
高中生期末评语
2014/01/28 职场文书
年度考核自我鉴定
2014/03/19 职场文书
和睦家庭事迹
2014/05/14 职场文书
小学课外阅读总结
2014/07/09 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js