<!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. ajax 的post方法 的content-type设置和express里应用body-parser

    ajax的post方法相比get方法,在传参形式上很不一样, get把参数用'?'拼接在端口后,并且用'&'连接;而post则是需要在send参数里设置. 根据ajax实例xhr.setReq ...

  2. Spring Boot & ES 实战，值得参考！

    作者:废物大师兄 cnblogs.com/cjsblog/p/9756978.html 1. 前言 1.1. 集成方式 Spring Boot中集成Elasticsearch有4种方式: REST C ...

  3. require 和 import 详解

    前言 JS模块化编程是前端小伙伴们必不可少的知识,下面妹子将于自认为比较清晰的方式列举出来. 1 require 特点: 1.运行时加载 2.拷贝到本页面 3.全部引入 1.1 CommonJS No ...

  4. P2731 骑马修栅栏 （欧拉路径）

    [题目描述] John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入栅栏网络的描述,并计算出一条修栅栏的路径,使每个栅栏都恰好被经过一次.John能从任何一 ...

  5. 搜索（DFS）---矩阵中的连通分量数目

    矩阵中的连通分量数目 200. Number of Islands (Medium) Input: 11000 11000 00100 00011 Output: 3 题目描述:   给定一个矩阵,求 ...

  6. 输入某人出生日期（以字符串方式输入，如1987-4-1）使用DateTime和TimeSpan类，（1)计算其人的年龄；（2）计算从现在到其60周岁期间，总共多少天。

    http://blog.csdn.net/w92a01n19g/article/details/8764116 using System;using System.Collections.Generi ...

  7. installsheild2011打包程序internal build error 6213

    今天打包一个安装程序,总是出现报错,internal build error -6213,然后搜遍都没有找到什么解决方案.看到一个帖子,说是因为installsheild里面的build的时候自动扫描 ...

  8. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  9. 没有找到<context:component-scan base-package="">标签

    <?xml version="1.0" encoding="UTF-8"?> <!-- 指定Spring配置文件的Schema信息 --> ...

  10. flask之表单

    一:表单 表单用于注册,修改用户数据等场景. flask-wtf提供了一个包,可以创建表单:pip install flask-wtf 为了防止跨域请求,flask_wtf自己生成一个秘钥,用秘钥生成 ...