基于vue实现分页效果
程序员文章站
2022-07-06 20:54:52
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。