脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue实现分页效果

基于vue实现分页效果

 更新时间：2017年11月06日 11:55:47   作者：匿名的girl  
这篇文章主要介绍了基于vue实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue使用.sync 实现父子组件的双向绑定数据问题

    Vue使用.sync 实现父子组件的双向绑定数据问题

    这篇文章主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
    2019-04-04
  • VeeValidate在vue项目里表单校验应用案例

    VeeValidate在vue项目里表单校验应用案例

    这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • Element-ui DatePicker显示周数的方法示例

    Element-ui DatePicker显示周数的方法示例

    这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue3+ts+vite2项目实战踩坑记录

    vue3+ts+vite2项目实战踩坑记录

    最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue数字相加、相减精度丢失处理3种方法

    Vue数字相加、相减精度丢失处理3种方法

    这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下
    2023-08-08
  • vue实现tab切换外加样式切换方法

    vue实现tab切换外加样式切换方法

    下面小编就为大家分享一篇vue实现tab切换外加样式切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3哈希模式实现锚点导航方式

    Vue3哈希模式实现锚点导航方式

    这篇文章主要介绍了Vue3哈希模式实现锚点导航方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • VUE中的filters过滤器使用方法

    VUE中的filters过滤器使用方法

    这篇文章主要介绍了VUE中的filters过滤器使用方法，文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载 、组件过滤器展开内容，具有一定的参考价值组要的小伙伴可以参考一下
    2022-03-03
  • vue项目netWork地址无法访问的问题及解决

    vue项目netWork地址无法访问的问题及解决

    这篇文章主要介绍了vue项目netWork地址无法访问的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue组件 非单文件组件的使用步骤

    vue组件 非单文件组件的使用步骤

    组件又分为非单文件组件和单文件组件，一般常用的就是单文件组件，这篇文章主要介绍了vue组件非单文件组件的使用步骤,需要的朋友可以参考下
    2023-01-01

最新评论