使 Vue 3 分页组件中当前页页码高亮

使分页结果中当前页码高亮是一个小小的需求：

举个例子，就是在下面这样一个组件的模板中，要求当 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>

看下效果：