通过<script>标签引入Vue2.0进行的分页

最新推荐文章于 2025-06-20 17:59:58 发布

原创最新推荐文章于 2025-06-20 17:59:58 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#分页 #html

Vue2.0初探专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Vue2.0框架，通过<script>标签引入库，实现高效且用户友好的网页分页功能。详细讲解了相关步骤和关键代码，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理一下自己做出来的分页，也给大家分享一下！希望对需要的人可以帮到！
1.首先在html页面引入vue2.0.js
2.在html页面定义一个组件
    <template id="pagintaion">
    <div class="page-bar">
        <div class="page-con">
               <ul>
                   <li v-if="cur>1"><a v-on:click="curs-- &amp;&amp; pageClick()">上一页</a></li>
                   <li v-if="cur==1"><a class="banclick">上一页</a></li>
                   <li v-for="index in indexs"  v-bind:class="{ active: cur == index}">
                       <a v-on:click="btnclick(index)">{{ index }}</a>
                   </li>
                   <li v-if="cur!=pages"><a v-on:click="curs++ &amp;&amp; pageClick()">下一页</a></li>
                   <li v-if="cur == pages"><a class="banclick">下一页</a></li>
                   <li><a>共<i>{{pages}}</i>页</a></li>
                   <li><a>共<i>{{count}}</i>條</a></li>
                   <li style="float:right">每頁
                        <span class="select-box inline size-MINI">
                            <select class="select" size="1" v-model="pageSize" v-on:change="onSelected">
                                <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
                            </select>   
                        </span> 條                       
                   </li>
               </ul>
            </div>
      </div>
</template>
其中用cur来判断是当前页是否是第一页，cur在后面的js代码中的默认值为1；<li v-if="cur==1"><a class="banclick">上一页</a></li>，如果cur为1的话，上一页的样式就为banclick,不能点击了！反之亦然！<li v-if="cur>1"><a v-on:click="curs-- &amp;&amp; pageClick()">上一页</a></li>，当触发点击上一页的事件时候，页码要跟着--。
indexs也是在js中定义好的，用户显示页码，且页码还有点击事件！<li v-for="index in indexs"  v-bind:class="{ active: cur == index}">

{{ index }} ，其中’indexs’是一个计算属性，在js代码中。
下一页和上一页的原理一样
下面到了每页的条数这个环节了，之前我找资料的时候，发现都是用v-cli打包好了的！
3.首先样式是一个问题，还有点击每页多少条的时候，要把当前页，每页的条数都传给后台。下面是js代码
new Vue({
el: ‘#page’,
data:{
users:”,
pages: 0, //总页数
present: 1,//当前页码
pageSize:10,//每页默认显示的页数
count:0
},
components:{
‘vue-nav’:{
template:’#pagintaion’,
props:[‘pages’,’cur’,’count’,’present’],
data:function(){
return{
curs:1,
pageSize:this. $parent.pageSize, options:[ {text:’10’,value:10}, {text:’20’,value:20}, {text:’50’,value:50}, {text:’100’,value:100} ] } }, computed: { indexs: function(){ var left = 1; var right = this.pages; var ar = []; if(this.pages>= 5){ if(this.cur > 3 && this.cur < this.pages-2){ left = this.cur - 2 right = this.cur + 2 }else{ if(this.cur<=3){ left = 1 right = 5 }else{ right = this.pages left = this.pages -4 } } } while (left <= right){ ar.push(left) left ++ } return ar } }, methods: { btnclick: function(data){ if(data != this.curs){ this.curs = data; this.$ emit(‘btn-click’,data);
}
},
pageClick: function(){
this. $emit(‘btn-click’,this.curs); }, onSelected:function(event){ this.pageSize = parseInt(event.target.value); this.$ parent.pageSize = this.pageSize;
this.$emit(‘btn-click’,this.curs);
this.curs=1;
}
}
},

},
 mounted:function(){
    this.listenDate(1);
},
methods:{
    listenDate:function(data){
        if(data == this.cur && data!=1) return;
        this.present = data;
        this.$http.post('findUserByPage',{'page':this.present,'pageSize':this.pageSize}).then((response)=>{
            console.log(response.data);
          console.log("Send Success:发送成功了");
          this.users = response.data.data.userList;
        this.pages = Math.ceil(response.data.data.userCount/this.pageSize);
        this.count = response.data.data.userCount;

        });
    },

    editBtn:function(){
        alert(1)
    }

}
})