<!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分页练习的更多相关文章

  1. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  2. 【laravel5.4】vue分页删除

    1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js

  3. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  4. Vue 分页功能伪代码实现

    Vue分页功能的实现 其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了 // 这里我们假设后端已经写好了 pageNum和pagesize <v ...

  5. 一、Vue分页实现

    一.Vue分页实现 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ ...

  6. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  7. VUE 分页组件

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. asp.mvc中的vue分页实例，分页组件无法重置reload，解决点击查询按钮后，分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  9. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

  10. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

随机推荐

  1. [2019杭电多校第八场][hdu6667]Roundgod and Milk Tea

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6667 题目大意是说n个班级,每个班级有ai人和bi杯茶,每个人只能喝其他班的茶并且只能喝一杯.问最多有 ...

  2. mysql事务的特性？

    1.原子性(Atomicity):事务中的全部操作在数据库中是不可分割的,要么全部完成,要么均不执 行. 2.一致性(Consistency):几个并行执行的事务,其执行结果必须与按某一顺序串行执行的 ...

  3. sweetalert插件替代alert/confirm

    更多关于SweetAlert的内容请参考:https://github.com/t4t5/sweetalert.

  4. 搜索---DFS

    DFS   广度优先一层一层遍历,每一层得到的所有新节点,要用队列存储起来以备下一层遍历的时候再遍历.   而深度优先遍历搜索在得到一个新节点时立即对新节点进行遍历:从节点0出发开始遍历,得到新节点6 ...

  5. 微信jssdk配置的问题，使用MVC制作的demo

    一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...

  6. Untiy3D的游戏物体的实例和刚体的使用

    一,如下代码, GameObject b = GameObject.Instantiate(bullet, transform.position, transform.rotation) as Gam ...

  7. 前端：HTML5和CSS3新特性一览

    转载:https://www.cnblogs.com/star91/p/5659134.html

  8. 20191202IIS

    IIS和.netfw4.0安装顺序是从前到后,如果不小心颠倒了,无所谓. 打开程序-运行-cmd:输入一下命令重新注册IIS C:\WINDOWS\Microsoft.NET\Framework\v4 ...

  9. 使用Jmeter聚合报告生成对比图表

    背景 最近在帮别的项目组执行性能测试,使用的工具是Jmeter.接口录制和参数化前一个人已经做好了,我主要的工作就是执行脚本,撰写测试报告.事情并不复杂,可做起来却极为耗时. 首先,由于有6组账号,分 ...

  10. Linux 内核层和 用户层 配置 GPIO 引脚

    Linux BSP 开发的基础就是和GPIO打交道, 下面总结下这几天对某家开发板的GPIO控制的知识. 公司的开发板用的是 DTB  模式 ,首先,进入 dts,dtsi文件查看关于GPIO 的模块 ...