实现一个分页条，支持点击某一页，动态添加样式类。 步骤： ① 在data准备一个页码数组 [1,2,3,4,5,6]。 ② 将数组通过指令循环的显示在button。 ③ 点击button，动态添加样式（背景颜色）到按钮。

HTML代码：

<div id="pagination">
  <button v-for="pageNum in pageList"
          :class="{active: currentPage === pageNum}"
          @click="changePage(pageNum)">
    {{ pageNum }}
  </button>
</div>

Vue实例JS代码：

new Vue({
  el: '#pagination',
  data: {
    pageList: [1, 2, 3, 4, 5, 6], // 页码数组
    currentPage: 1 // 当前选中页码，默认为1
  },
  methods: {
    changePage(pageNum) {
      this.currentPage = pageNum; // 点击按钮时更新当前选中页码
    }
  }
});

CSS代码：

button {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  margin: 2px;
  padding: 5px;
}
button.active {
  background-color: #007aff;
  color: #fff;
}

解释： 在Vue实例里，定义了一个页码数组pageList和当前选中页码currentPage，默认为1。在方法changePage里更新currentPage的值，使得刚刚点击的按钮样式可以实时更新。在HTML中将页码数组循环渲染出button，并根据当前按钮是否为选中按钮，通过:class指令动态添加或删除active样式类。最后在CSS中定义样式，其中.active类为当前选中按钮的样式。