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分页练习的更多相关文章
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
- 【laravel5.4】vue分页删除
1.a标签执行ajax删除,后台删除成功后,执行vue分页对象删除对应数据 VUE.js
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- Vue 分页功能伪代码实现
Vue分页功能的实现 其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了 // 这里我们假设后端已经写好了 pageNum和pagesize <v ...
- 一、Vue分页实现
一.Vue分页实现 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ ...
- vue分页组件table-pagebar
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...
- VUE 分页组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- asp.mvc中的vue分页实例，分页组件无法重置reload，解决点击查询按钮后，分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
随机推荐
- linux复杂命令
1,查看包含zypper且不包含ar的进程信息的2,3,8,9列信息 ps -ef|grep zypper|grep -v ar|awk '{print $2,$3,$8,$9}' eg:查看包含zy ...
- es6基本介绍及使用
1.什么是es6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应 ...
- 埃及分数问题（带乐观估计函数的迭代加深搜索算法-IDA*）
#10022. 「一本通 1.3 练习 1」埃及分数 [题目描述] 在古埃及,人们使用单位分数的和(形如 $\dfrac{1}{a}$ 的,$a$ 是自然数)表示一切有理数.如:$\dfrac{ ...
- VirtualBox虚拟机与主机互通，并且虚拟机又能上网配置
1.在Virtualbox 的全局模式下建立host-only网络,完成之后在网络邻居的属性中会出现本地连接和virtualbox host-only ethernet 连接 2.点击本地连接的属性, ...
- k3 cloud成本调整单
做了成本调整单中的入库调整单或者出库调整单,进行入库成本核算和出库成本核算,做了入库调整单后在存货收发汇总表(按日期报表)中的收入部分会展示出来: 如果做的是期末余额成本调整,核算时会先删除手工新增的 ...
- ASE Code Search
重现基线模型 Hamel's model 基线模型原理 如何实现semantic search?在已有数据库的基础上,衡量一个句子和每段代码的相关性再进行排序,选出最优代码片段即可实现一个通用的cod ...
- 数据写入到Excel，模板样式复杂
先整理好Excel模板,如: 接下来在程序获取上面整理好的Excel模板并替换关键字就可以了public ActionResult SummaryStatistics() public ActionR ...
- join 按两个文件的相同字段合并
1.命令功能 join对每一对具相同内容的输入行,合并为一行输出.默认情况是把输入的第一个字段作为连接字段,字段间用空格隔开. 2.语法格式 join option file1 file2 jo ...
- ln 硬链接与软链接
1. 命令功能 ln 可以看做是link的简写,功能是创建链接文件,链接文件包括硬链接(hard link)和软链接(符号链接,symbolic link) 2. 语法格式 ln [option] ...
- less:避免编译
.box { width: ~"calc(300px - 30px)"; } 编译成css .box { width: calc(300px - 30px); } importan ...