Material Design风格神框架vuetify 学习笔记(十二) 组件的基础

一. 窗口 v-window

v-window 被设计成可以轻松地循环浏览内容，它提供了一个简单的接口来创建真正的自定义实现。

v-window组件提供了将内容从一个窗格过渡到另一个窗格的基础功能。 其他组件如v-tabs、v-carousel和v-stepper使用此组件作为其核心。

1. 基本窗口😂😂😂

<template>
  <div class="pa-6">
    <v-window v-model="show_flag">
      <v-window-item v-for="n in 4" :key="n">
        <v-card color="grey" height="200">
          <v-row class="fill-height" align="center" justify="center">
            <h1 style="font-size: 5rem" class="white--text">Slide{
   { n }}</h1>
          </v-row>
        </v-card>
      </v-window-item>
    </v-window>
    <v-container grid-list-xs>
      <v-row>
        <v-btn dark @click="show_flag--">←</v-btn>
        <v-spacer></v-spacer>
        <v-btn dark @click="show_flag++">→</v-btn>
      </v-row>
    </v-container>
  </div>
</template>

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

2. 反转划入 reverse

<v-window reverse v-model="show_flag">

3. 垂直 vertical

<v-window vertical v-model="show_flag">

综合: 一个简单案例

<template>
  <div class="pa-6">
    <v-container grid-list-xs>
      <v-row>
        <v-btn
          dark
          color="#830c07"
          @click="show_flag--"
          :disabled="show_f