vue—模拟分页

最新推荐文章于 2024-05-01 18:11:35 发布

spfLinux

最新推荐文章于 2024-05-01 18:11:35 发布

阅读量399

点赞数

分类专栏： vue

vue 专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.btnSelect{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="example">
		<button :disabled="nowPage==1">上一页</button>
		<button @click="choosePage(tmp)" :class="{btnSelect:nowPage==tmp}" v-for="tmp in pageList">
			{{tmp}}
		</button>
		<button :disabled="nowPage==5">下一页</button>
	</div>

	<script type="text/javascript">
		new Vue({
			el:'#example',
			data:{
				pageList:[1,2,3,4,5],
				nowPage:1
			},
			methods:{
				choosePage:function(page){
					this.nowPage=page;
				}
			}
		});
	</script>
</body>
</html>