使分页结果中当前页码高亮是一个小小的需求：
举个例子，就是在下面这样一个组件的模板中，要求当 item 等于当前页码数的时候，{{ item }} 所在的 span 元素拥有区别于其它 span 元素的样式：
src/components/PaginationButtons.vue
<template>
<div class="pagination-buttons">
<button @click="prevPage">◀</button>
<span v-for="(item,key) in total" :key="key">{{ item }}</span>
<button @click="nextPage">▶</button>
</div>
</template>
最简单的办法就是传递给 :class一个对象来动态地切换 class。
对象的属性是可能绑定的 class 值，属性的值 true 或 false 则可以由比较结果确定。
只需要这样做：
...
<span v-for="(item,key) in total" :key="key" :class="{'current': compare(item)}">{{ item }}</span>
...
<script>
export default {
name: "PaginationButtons",
props: ['size', 'page', 'total'],
methods: {
compare(index) {
return index === this.page;
},
}
}
</script>
<style scoped>
...
.current {
background-color: #fa0788;
color: #35495E;
/* 下右阴影 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
看下效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98046.html
