vuetify vue3

作者：半盏流年发布日期:2025-07-08 浏览:97

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-btn color="primary" @click="showAlert">Click Me</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

<style scoped>
/* Add your styles here */
</style>

解释说明：

模板部分 (<template>):
- 使用了 v-app 组件，这是 Vuetify 应用程序的根组件。
- v-main 和 v-container 是布局组件，用于组织页面内容。
- v-btn 是一个按钮组件，设置了颜色为 primary，并绑定了点击事件 @click="showAlert"。
脚本部分 (<script>):
- 定义了一个 Vue 组件，名为 App。
- methods 中定义了一个方法 showAlert，当按钮被点击时会弹出一个提示框。
样式部分 (<style scoped>):
- 可以在这里添加自定义样式，scoped 表示这些样式只作用于当前组件。

上一篇：vue3 provide inject用法

下一篇：vue component name