vue简单的分页

vue分页

<template>
    <div id='goods'>
            <button v-for='item in items' @click="c(item)"  :class = "cur == item ? 'active' : ''"> {{item}} </button>
    </div>
</template>

<script>
export default {
    name:'goods',
    data(){
        return {
            items : [1,2,3,4,5],
            cur : 2
        }
    },
    methods:{
        // 点击事件
        c:function(page){
           // 如果当前页和被点击的页面不一致,则弹出警告框
            if(page!=this.cur){
                alert(page);
            }
            // 将被点击的页码赋值给当前页
            this.cur = page;
        }
    }
    
}
</script>
<style scoped>
.active{
    color:red;
} 
</style>
posted @   巫小诗  阅读(151)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
点击右上角即可分享
微信分享提示