使用 "Next" 和 "Back" 按钮在 Vuetify 中分页

Question

我想了解 Vuetify 中的分页是如何工作的。我发现使用这个简单的组件我可以获得基本的分页。

<v-pagination
  v-model="page"
  :length="4"
  circle
/>

看起来像这样：

而不是这个，我只想要两个按钮； Next 和 Back

目前，我只想知道如何更改视图。我没有任何事件处理程序。

Answer 1

如果你想在你的问题上有 2 个基本按钮和视觉效果，你可以使用一个简单的按钮组件和一些 CSS 像这样（使用 Vue3）

来实现它

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  Page count: {{ count }}
  <br/>
  <button @click="count--" class="button">minus</button>
  <button @click="count++" style="margin-left: 0.5rem; background-color: blue;" class="button">plus</button>
</template>

<style scoped>
  .button {
    color: white;
    background-color: gray;
    border-radius: 0.25rem;
    padding: 0.25rem;
    font-weight: 700;
    border: none;
  }
</style>

这里是the result.

Answer 2

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-card flat>
              <v-card-text>
                <v-btn
                  color="teal"
                  icon
                  small
                  @click="page > 0 ? page-- : null"
                >
                  <v-icon>mdi-chevron-right</v-icon>
                </v-btn>
                <v-btn color="teal" icon small @click="page++">
                  <v-icon>mdi-chevron-right</v-icon>
                </v-btn>
              </v-card-text>
              <v-card-text>
                {{ page }}
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      page: 0,
      dialog: false,
    };
  },
};
</script>

使用 "Next" 和 "Back" 按钮在 Vuetify 中分页

Pagination in Vuetify with "Next" and "Back" button

vue.js

nuxt.js

vuetify.js