vuetify v-btn 按钮类型variant

美丽先生

已于 2024-05-14 16:56:02 修改

阅读量95

点赞数

文章标签：前端

于 2024-05-14 16:53:13 首次发布

本文链接：https://blog.csdn.net/qq_43780814/article/details/138861304

版权

在这里插入图片描述

<template>
  <div class="text-center mb-3">“平面”|“文本”|“提升”|“色调”|“轮廓”|“平面”</div>
  <div class="text-center mb-3">'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'</div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="flat">{{ item }}</v-btn>
  </div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="text">{{ item }}</v-btn>
  </div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="elevated">{{ item }}</v-btn>
  </div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="tonal">{{ item }}</v-btn>
  </div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="outlined">{{ item }}</v-btn>
  </div>
  <div class="text-center mb-3">
    <span class="mr-2">热门职位:</span>
    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="btn ml-2" color="primary" variant="plain">{{ item }}</v-btn>
  </div>
</template>