Vuetify

设置字体

设置前景色（字颜色）为红色

<span class="red--text">100</span>
<span class="red--text text--darken-2">100</span>

设置字体粗体

<div class="font-weight-bold"></div>

水平居中

文本居中

<v-row class="text-center">///center///</v-row>

字段太长显示…省略号

<span
   class="d-inline-block text-truncate"
   style="max-width: 120px"
   >{{ item.model }}
</span>

图片v-img居中

<v-row>
  <v-col cols="12" align="center">
    <v-img width="75%" src="../assets/play2.jpg"></v-img>
  </v-col>
</v-row>

卡片标题v-card-title居中

<v-card class="fill-height">
  <v-card-title class="text-center"> <v-flex align="center">Title</v-flex></v-card-title>
  <v-card-text class="text-left"></v-card-text>
</v-card>
          

撑满

v-card撑满grid

<v-row>
	<v-col cols="4">
		<v-card height="100%">
		</v-card>
	</v-col>
	<v-col cols="4" align-self="stretch">
		<v-card height="100%">
		</v-card>
	</v-col>
	<v-col cols="4">
		<v-card height="100%">
		</v-card>
	</v-col>
</v-row>

根据屏幕大小自适应数据表字段

v-data-table根据页面大小显示不同字段，通过设置headers里的class和cellClass的breakpoints来实现。

<template>
  <v-data-table :headers="headers">
  <!--...--->
  </v-data-table>
</template>
<script>
export default {
  name: "XXX",
  data() {
  	return {
      headers: [
        //...
        {text: "Column 1", value: "column1", class: "d-none d-lg-table-cell", cellClass: "d-none d-lg-table-cell"},
        {text: "Column 2", value: "column2", class: "d-none d-lg-table-cell", cellClass: "d-none d-lg-table-cell"}
        //
      ];
    }
  }
</script>