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>