翻到之前学习vuetify的笔记…哈哈哈哈哈笑死我了(ﾉ≧∀≦)ﾉ 好像学得很苦逼的样子，还有很多错误，em…但是很好玩~记录一下 用//开头为之前学习时的备注 (:з」∠)
Vuetify
- A Vue JS 2.0 Component Framework
- 基于vue.js 2.0 的组件框架
安装Install
npm
npm install vuetify --save-dev
使用Use
引入
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
组件的使用
<!--Example component declaration-->
Vue.component('cell', { template: '<td><slot></slot></td>' });
<!--Example scoped slot-->
<template slot="items" scope="props">
<cell>{{ props.item.name }}</cell>
</template>
默认应用程序标记
这是Vuetify的默认应用程序标记。关键在于，在DOM中，抽屉、工具栏、主页和页脚都是相同的。使用5个预先生成的vucli模板中的任何一个将自动包括这个结构:
<v-app>
<v-navigation-drawer></v-navigation-drawer>
<v-toolbar></v-toolbar>
<main>
<v-container fluid>
<router-view></router-view>
</v-container>
</main>
<v-footer></v-footer>
</v-app>
请记住，v-navigation-drawer已经被删除了，并设置为绝对位置。在您的应用程序中，您可以选择忽略这些属性。
//使用模板，其他基本设置就算是默认了吧，5个模板名记不住…
网格布局 Layout — Grid
//跟bootstrap一样，分为12
v型容器可以用于一个聚焦于中心的页面，也可以使用液体支柱来扩展它的宽度。v型布局用于分隔部分，并包含v-flex。布局的结构如下:v-布局v-flex。
<template>
<div id="example-1">
<v-layout row wrap>
<v-flex xs12>
<v-card dark class="primary">
<v-card-text class="px-0">12</v-card-text>
</v-card>
</v-flex>
<v-flex xs6 v-for="i in 2" :key="i">
<v-card dark class="secondary">
<v-card-text class="px-0">6</v-card-text>
</v-card>
</v-flex>
<v-flex xs4 v-for="i in 3" :key="i">
<v-card dark class="primary">
<v-card-text class="px-0">4</v-card-text>
</v-card>
</v-flex>
<v-flex xs3 v-for="i in 4" :key="i">
<v-card dark class="secondary">
<v-card-text class="px-0">3</v-card-text>
</v-card>
</v-flex>
<v-flex xs2 v-for="i in 6" :key="i">
<v-card dark class="primary">
<v-card-text class="px-0">2</v-card-text>
</v-card>
</v-flex>
<v-flex xs1 v-for="i in 12" :key="i">
<v-card dark class="secondary">
<v-card-text class="px-0">1</v-card-text>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
显示帮助程序允许您根据viewport宽度来控制显示内容。
phone_iphone
Extra small small to large handset < 600px
tablet
Small small to medium tablet 600px > < 1024px
laptop
Medium large tablet to laptop 1024px > < 1440px
desktop_windows
Large desktop 1440px > < 1920px
tv
Extra large 4k and ultra-wides > 1920px
样式分别为：
xs sm md lg xl
xs - extra small viewport devices (< 576px)
sm - small viewport devices (< 768px)
md - medium viewport devices (< 992px)
lg - large viewport devices (< 1200px)
xl - extra large viewport devices (> 1200px)
Type
m - to set margin
p - to set padding
Direction
t - to set top
r - to set right
b - to set bottom
l - to set left
x - to set x-axis
y - to set y-axis
a - to set all
Size
0 - removes margin or padding for specified direction
1 - applies margin or padding with 16px * .25
2 - applies margin or padding with 16px * .50
3 - applies margin or padding with 16px
4 - applies margin or padding with 16px * 1.5
5 - applies margin or padding with 16px * 3
例子
<p class="mt-1">...</p>
<li class="pb-2">...</li>
<v-btn class="primary ma-3">...</v-btn>
可以设置文字对齐方法：left center right
例子：
<template>
<v-card>
<v-card-text>
<p class="text-lg-right">Right align on large viewport sizes</p>
<p class="text-md-center">Center align on medium viewport sizes</p>
<p class="text-sm-left">Left align on small viewport sizes</p>
<p class="text-xs-center">Center align on all viewport sizes</p>
<p class="text-xs-right">Right align on all viewport sizes</p>
</v-card-text>
</v-card>
</template>
Elevation
海拔帮助器允许你在z轴的两个表面之间控制相对深度，或距离。
有相对应的25个深度值：0-24
可以用 elevation-N 来设置
// 就是控件的立体效果
Sandbox
自定义设置各种样式
这一页将允许你在与Vuetify建立一个布局时配置各种各样的设置。
<template>
<v-app
id="sandbox"
:dark="dark"
:light="!dark"
standalone
>
<v-navigation-drawer
v-model="primaryDrawer.model"
:permanent="primaryDrawer.type === 'permanent'"
:persistent="primaryDrawer.type === 'persistent'"
:temporary="primaryDrawer.type === 'temporary'"
:clipped="primaryDrawer.clipped"
:floating="primaryDrawer.floating"
:mini-variant="primaryDrawer.mini"
absolute
overflow
enable-resize-watcher
></v-navigation-drawer>
<v-toolbar>
<v-toolbar-side-icon @click.stop="primaryDrawer.model = !primaryDrawer.model" v-if="primaryDrawer.type !== 'permanent'"></v-toolbar-side-icon>
<v-toolbar-title>Vuetify</v-toolbar-title>
</v-toolbar>
<main>
<v-container fluid>
<v-layout align-center justify-center>
<v-flex xs10>
<v-card>
<v-card-text>
<v-layout row wrap>
<v-flex xs12 md6>
<span>Scheme</span>
<v-switch primary label="Dark" v-model="dark"></v-switch>
</v-flex>
<v-flex xs12 md6>
<span>Drawer</span>
<v-radio
primary
:label="drawer"
v-model="primaryDrawer.type"
:value="drawer.toLowerCase()"
v-for="drawer in drawers"
:key="drawer"
></v-radio>
<v-switch label="Clipped" v-model="primaryDrawer.clipped" primary></v-switch>
<v-switch label="Floating" v-model="primaryDrawer.floating" primary></v-switch>
<v-switch label="Mini" v-model="primaryDrawer.mini" primary></v-switch>
</v-flex>
<v-flex xs12 md6>
<span>Footer</span>
<v-switch label="Fixed" v-model="footer.fixed" primary></v-switch>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat>Cancel</v-btn>
<v-btn flat primary>Submit</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</main>
<v-footer :absolute="footer.fixed">
<span>© 2017-</span>
</v-footer>
</v-app>
</template>
颜色的样式：
red :
red lighten-4
red lighten-3
red lighten-2
red lighten-1
red darken-1
red darken-2
red darken-3
red darken-4
red accent-1
red accent-2
red accent-3
red accent-4
pink purple deep-purpli
indigo blue light-blue cyan
teal green light-green lime
yellow amber orange deep-orange
brown blue-grey grey
背景颜色
For some elements like the
<v-badge>, you can use the –after type for the background,<span class="green--after" v-badge:5>.
主题
一般有默认主题，可以使用dark或者light来改变一些主题
如果要改变默认主题
则需要安装stylus
//很复杂的样子，还需要修改webpack的设置，果然能用自带的就用自带的吧,下面是大片大片原版的copy
Setup stylus-loader with Webpack
用npm安装：
In the command line, run:
npm i stylus stylus-loader style-loader css-loader --save-dev
更改webpack的设置：
This will install the dependecies needed to import stylus files. Once installed, open your webpack config and add an additional rule:
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
This will tell webpack how to handle a .styl file when imported.
添加主要的entry入口：
Next, we need to create the main entry point. Create a folder called stylus in your src directory with a file named main.styl. Once done, open the .styl file and add this entry.
// main.style
@require '../../node_modules/vuetify/src/stylus/main'
请记住，node模块的相对位置可能在您的项目中有所不同，因此要相应地调整。您有两个导入位置的选项，您的主要应用程序APP.vue或app.js。 Keep in mind that the relative location of node_modules may differ in your project so adjust accordingly. You have 2 options for import location, either your main App.vue or app.js.
// app.js
require('./stylus/main.styl')
// App.vue
<style lang="stylus">
@require './stylus/main'
</style>
在您决定了导入位置之后，如果您需要在index文件中使用
<link>标签引入“Vuetify”，那么就删除它。重新启动您的构建过程并重新打开您的项目。你应该看到所有的样式都是正确的。 修改你的主题 After you have decided on your import location, if you are requiring the Vuetify stylesheet by a<link>tag in your index file, remove it. Restart your build processes and re-open your project. You should see all of the styles working correctly.Modify your theme
Now that stylus is configured, we can create a custom $theme hash containing the application specific styles. Keep in mind, if you want to use the built in color pack variables, i.e. $grey.lighten-3 you will need to import the color file at the top of your main.styl file. For a list of colors available, navigate to the Colors section of the documentation.
@require '../../node_modules/vuetify/src/stylus/settings/_colors'
@import '../../node_modules/vuetify/src/stylus/main'
content_copy
After you have decided on your color palette, simply create a new hash:
@require '../../node_modules/vuetify/src/stylus/settings/_colors'
$theme := {
primary: $red.darken-2
accent: $red.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
@require '../../node_modules/vuetify/src/stylus/main'
排版
头部、标题
h1
h2
h3
h4
h5(headline)
h6(title)
s(subheading)
b2(body-2)
b1(body-1)
c(caption)
内容content
<blockquote>引用</blockquote>
<paragraphs>段落</paragraphs>
<code>代码</code>
<variables>变量</variables>
动作Motion
Slide X transitions
//button 点击后菜单水平出现
主要是：
<v-menu transition="slide-x-transition">
<v-menu transition="slide-x-reverse-transition">
完整例子：
<template>
<div class="text-xs-center">
<v-menu transition="slide-x-transition">
<v-btn dark primary slot="activator">Slide X Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-menu transition="slide-x-reverse-transition">
<v-btn dark secondary slot="activator">Slide X Reverse Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
Slide Y transitions
//button 点击后菜单垂直出现
主要是：
<v-menu transition="slide-y-transition">
<v-menu transition="slide-y-reverse-transition">
完整例子：
<template>
<div class="text-xs-center">
<v-menu transition="slide-y-transition">
<v-btn dark primary slot="activator">Slide Y Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-menu transition="slide-y-reverse-transition">
<v-btn dark primary slot="activator">Slide Y Reverse Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
Scale transition 缩放动画
<template>
<div class="text-xs-center">
<v-menu transition="scale-transition">
<v-btn dark primary slot="activator">Scale Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
Fade transition 消退动画
//看不出和缩放的区别，捂脸= =！怀疑自己眼神有问题？！
<template>
<div class="text-xs-center">
<v-menu transition="fade-transition">
<v-btn dark primary slot="activator">Fade Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
Custom Origin 自定义原动画样式？！
<template>
<div class="text-xs-center">
<v-menu transition="scale-transition" origin="center center">
<v-btn dark primary slot="activator">Scale Transition</v-btn>
<v-list>
<v-list-tile v-for="n in 5" :key="n">
<v-list-tile-title v-text="'Item ' + n"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
//上面这个是在原有基础上进行一些自定义 //还可以自己自定义过渡效果,详细看官方手册…
Components！！
//组件！终于看到组件了！ //不然前面看标签看得一头雾水 //我要从这里开始对这些组件进行实例化啦~~哈哈哈 //之后要出现两种备注,一种还是//实例化前的 ~~实例化后的备注，走你~
alert
<v-alert>
</v-alert>
alert有4种变化 ： success, info, warning and error
成功，信息，警告，错误
示例：
<template>
<div>
<v-alert success value="true">
This is a success alert.
</v-alert>
<v-alert info value="true">
This is a info alert.
</v-alert>
<v-alert warning value="true">
This is a warning alert.
</v-alert>
<v-alert error value="true">
This is a error alert.
</v-alert>
</div>
</template>
~~ 注意：要加上<value=”true”>的属性！不然显示不出来！
可关闭的警告
可以用v-model来双向绑定关闭警告事件
示例：
HTML
<template>
<div>
<v-alert info dismissible v-model="alert">
This is a success alert that is closable.
</v-alert>
<div class="text-xs-center">
<v-btn primary dark v-if="!alert" v-on:click.native="alert = true">Reset</v-btn>
</div>
</div>
</template>
script
<script>
export default {
data () {
return {
alert: true
}
}
}
</script>
//突然发现我之前的示例都只是copy了html的代码，没有注意script的，不知道里面是默认值还是需要自己设定的？！诶~有待验证！！
~~单独的dismissible只会出现叉叉的图标，点击后没有任何效果，需要绑定v-model
~~注意alert的拼写，总是写错成alter有毒哦！！
~~补充：script的代码中涉及动态数据从后台获取，静态可写死
可自定义警告提示的图标或者不需要图标
示例：
<template>
<div>
<v-alert success icon="new_releases" v-bind:value="true">
This is a success alert with a custom icon.
</v-alert>
<v-alert error hide-icon v-bind:value="true">
This is an error alert with no icon.
</v-alert>
</div>
</template>
~~注意啦~不是no-icon 而是hide-icon！！
Display transition 警告还可以添加过渡的动画
示例：
<template>
<div>
<div class="text-xs-center">
<v-btn primary @click.native="alert = !alert">Toggle</v-btn>
</div>
<v-alert
success
:value="alert"
transition="scale-transition"
>
This is a success alert.
</v-alert>
</div>
</template>
~~注意transition的拼写！
<v-alert>可选择属性：
dismissible Boolean False Specifies that the Alert can be closed
icon String - Designates a specific icon
hide-icon Boolean False Hides the alert icon
primary Boolean False Applies the primary contextual color
secondary Boolean False Applies the secondary contextual color
success Boolean False Applies the success contextual color
info Boolean False Applies the info contextual color
warning Boolean False Applies the warning contextual color
error Boolean False Applies the error contextual color
mode String - Sets the transition mode (does not apply >to transition-group)
origin String - Sets the transition origin
transition String - Sets the component transition. Can be one >of the built in transitions or your own.
v-model * - Controls visibility
Breadcrumbs 面包屑导航
Text dividers 文本分割
HTML：
<template>
<div>
<v-breadcrumbs divider="/">
<v-breadcrumbs-item
v-for="item in items" :key="item.text"
:disabled="item.disabled"
>
</v-breadcrumbs-item>
</v-breadcrumbs>
<v-breadcrumbs divider="-">
<v-breadcrumbs-item
v-for="item in items" :key="item.text"
:disabled="item.disabled"
>
</v-breadcrumbs-item>
</v-breadcrumbs>
</div>
</template>
script：
<script>
export default {
data () {
return {
items: [
{
text: 'Dashboard',
disabled: false
},
{
text: 'Link 1',
disabled: false
},
{
text: 'Link 2',
disabled: true
}
]
}
}
}
</script>
~~注意拼写的问题！disabled是用来控制是否可点击触发的
Icon dividers 图标分割
<template>
<div>
<v-breadcrumbs icons divider="forward">
<v-breadcrumbs-item
v-for="item in items" :key="item.text"
:disabled="item.disabled"
>
</v-breadcrumbs-item>
</v-breadcrumbs>
<v-breadcrumbs icons divider="chevron_right">
<v-breadcrumbs-item
v-for="item in items" :key="item.text"
:disabled="item.disabled"
>
</v-breadcrumbs-item>
</v-breadcrumbs>
</div>
</template>
script
<script>
export default {
data () {
return {
items: [
{
text: 'Dashboard',
disabled: false
},
{
text: 'Link 1',
disabled: false
},
{
text: 'Link 2',
disabled: true
}
]
}
}
}
</script>
~~记得icon要加s，是负数的
Bottom navigation 底部导航
<template>
<v-card height="200px">
<v-bottom-nav absolute value="true" class="transparent">
<v-btn flat light class="teal--text" @click.native="e1 = 1" :value="e1 === 1">
<span>Recents</span>
<v-icon>history</v-icon>
</v-btn>
<v-btn flat light class="teal--text" @click.native="e1 = 2" :value="e1 === 2">
<span>Favorites</span>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn flat light class="teal--text" @click.native="e1 = 3" :value="e1 === 3">
<span>Nearby</span>
<v-icon>place</v-icon>
</v-btn>
</v-bottom-nav>
</v-card>
</templat>
~~flat是平面显示的意思吧..大概
Color & shift
当使用彩色背景时，建议使用灯柱。shift键会将按钮文本隐藏直到活动状态。记住，v-btn文本需要包装在一个
<span></span>标签中。
<template>
<v-card height="200px">
<v-bottom-nav
absolute
shift
value="true"
:class="{
'blue-grey': e2 === 1,
'teal': e2 === 2,
'brown': e2 === 3,
'brown lighten-1': e2 === 4
}"
>
<v-btn dark @click.native="e2 = 1" :value="e2 === 1">
<span>Video</span>
<v-icon>ondemand_video</v-icon>
</v-btn>
<v-btn dark @click.native="e2 = 2" :value="e2 === 2">
<span>Music</span>
<v-icon>music_note</v-icon>
</v-btn>
<v-btn dark @click.native="e2 = 3" :value="e2 === 3">
<span>Book</span>
<v-icon>book</v-icon>
</v-btn>
<v-btn dark @click.native="e2 = 4" :value="e2 === 4">
<span>Image</span>
<v-icon>image</v-icon>
</v-btn>
</v-bottom-nav>
</v-card>
</template>
<script>
export default {
data () {
return {
e2: 3
}
}
}
</script>
~~注意shift
Buttons //好多样式，选择性忽略一些哈
<template>
<v-card class="elevation-0 py-5 grey lighten-3">
<v-card-text>
<v-container fluid class="pa-0">
<v-layout row wrap>
<v-flex xs12 sm4 class="py-2">
<p>Overflow</p>
<v-select v-bind:items="dropdown_font" overflow label="Select"></v-select>
</v-flex>
<v-flex xs12 sm4 class="py-2">
<p>Segmented</p>
<v-select v-bind:items="dropdown_icon" label="Select" segmented></v-select>
</v-flex>
<v-flex xs12 sm4 class="py-2">
<p>Editable</p>
<v-select v-bind:items="dropdown_edit" label="Select" editable item-value="text"></v-select>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</template>
<script>
export default {
data () {
return {
dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
dropdown_icon: ['list', 'favorite', 'delete'],
dropdown_edit: [
{ text: '100%' },
{ text: '75%' },
{ text: '50%' },
{ text: '25%' },
{ text: '0%' }
],
}
}
}
</script>
//居然看到一例海拔使用的，elevation，原来是通过py来设置的吗？不过效果不明显，需要动手了，走你！
//好了，之前的猜想完全错误，elevation的设置就是用elevation-n来设置的，在这个例子中，它主要用来设置后背景<v-card>嘛~那么问题来了py是什么？初步试验后应该是padding和什么的复合词！！问题又来了，是什么呀?y开头的有什么单词呀？！！！要疯，不知道！！还查不到，生气！[○･｀Д´･ ○]
圆形按钮fab
<template>
<div class="text-xs-center">
<v-btn fab dark small primary>
<v-icon dark>remove</v-icon>
</v-btn>
<v-btn fab dark small class="pink">
<v-icon dark>favorite</v-icon>
</v-btn>
<v-btn fab dark class="indigo">
<v-icon dark>add</v-icon>
</v-btn>
<v-btn fab dark class="teal">
<v-icon dark>list</v-icon>
</v-btn>
<v-btn fab dark large class="cyan">
<v-icon dark>edit</v-icon>
</v-btn>
<v-btn fab dark large class="purple">
<v-icon dark>android</v-icon>
</v-btn>
</div>
</template>
//浮动按钮是圆形的，通常包含一个图标。
加载
使用加载项，您可以通知用户正在进行处理。默认的行为是使用v-progress-circular，但这可以定制
Outline 按钮从当前的颜色继承了它们的边框。
<template>
<div class="text-xs-center">
<v-btn outline class="indigo--text">Outline Button</v-btn>
<v-btn outline fab class="teal--text">
<v-icon>list</v-icon>
</v-btn>
<v-btn outline large fab class="indigo--text">
<v-icon>edit</v-icon>
</v-btn>
</div>
</template>
round 圆角按钮和普通按钮一样，但有圆角。
<template>
<div class="text-xs-center">
<v-btn round primary dark>Rounded Button</v-btn>
</div>
</template>
block 块按钮扩展了可用的宽度。
<template>
<v-btn block secondary dark>Block Button</v-btn>
</template>
v-btn相关属性
absolute Boolean False Position the component absolutely.
active-class String btn–active Applies the .btn–active class. This does not alter the button style, but can be used for hooking into.
append Boolean False Vue Router router-link prop
block Boolean False Button will have 100% width
bottom Boolean False Align the component towards the bottom.
dark Boolean True Applies a dark tint to the content - light themes
disabled Boolean False List tile is disabled
error Boolean False Applies the error contextual color
exact Boolean False Exactly match the link. Without this, “/” will match every route
fixed Boolean False Position the component fixed.
flat Boolean False Applies the flat style
floating Boolean False Applies the floating / round style
href String, Object javascript:; For router, this is passed to the “to” prop
icon Boolean False Designates the button as icon - round and flat
info Boolean False Applies the info contextual color
large Boolean False Large size button
left Boolean False Align the component towards the left.
light Boolean False Applies a light tint to the content - dark themes
loading Boolean False Adds a loading icon animation
nuxt Boolean False Specifies the link is a nuxt-link
outline Boolean False Button will have an outline
primary Boolean False Applies the primary contextual color
raised Boolean True Applies the raised style
replace Boolean False Vue Router router-link prop
right Boolean False Align the component towards the right.
ripple Boolean False Applies ripple effect
round Boolean False Button will be round on the sides
secondary Boolean False Applies the secondary contextual color
small Boolean False Small size button
success Boolean False Applies the success contextual color
tag String a Use a custom tag for the list tile
target String - Specify the target attribute, only works with anchor tag.
to String, Object javascript:; For router, this is passed to the “to” prop
top Boolean False Align the component towards the top.
v-model False Controls visibility
warning Boolean False Applies the warning contextual color
//啧啧啧，样式也太多了吧，捂脸…有毒！
//好烦啊！ヽ(｀Д´)ﾉ这样子看跟学习不知道要看多久，不看了，直接写吧！在写的过程中增强记忆吧！
在实践的过程中的一些注意事项：
一个板块大体的框架
<v-card class="">
<v-card-text>
<v-container fluid>
<v-layout row>
<v-flex>...</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
v-select的标签要进行绑定bind数组,而不是用v-for来循环显示数组,而且还需要用v-model来绑定
v-radio 绑定模型，默认选择哪个项,不然无法显示
picker在使用时需要在v-menu的标签内使用
一个日历选择器的大体框架如下：
<menu>
<v-text-field v-model="e1" readonly slot="activator"></v-text-field>
<v-date-picker v-model="e1">
<v-card-action>
<template scope="{save, cancel}">
<v-btn @click.native="cancel()">cancel</v-btn>
<v-btn @click.native="save()">save</v-btn>
</template>
</v-card-action>
</v-date-picker>
</menu>
//menu后面可加一些样式属性,例如：lazy transition=”scale-transition”
v-menu( transition="scale-transition" v-model="menu")
v-text-field(v-model="e3" slot="activator" readonly prepend-icon="access_time")
v-time-picker(v-model="e3" autosave)
啊啊啊啊啊！为pug疯狂打call，好棒啊！！不用在加<>太幸福有木有！！ 必须学起来！！！必须用起来！！！
如果要使用文字样式的话，写成格式为：class=”red–text” 注意后面要用–
v-alert 可以在里面嵌套标签，目前有v-select v-btn
像v-layout，v-flex，v-subheader，v-text-field等这些标签对其使用v-model的绑定真假显示是没有效果的 需要用v-alert能够实现隐藏效果
大写加粗！！！拜托注意拼写好吧！！！特别是model，alert,activator,label这些东西啊！！！！很耽误事情的啊！！！！！！每次都是因为单词拼错，结果浪费很多时间！！
关于v-tab的一个样式：
div
v-tabs(dark fixed centered v-model="active")
v-tabs-bar(slot="activators" class="deep-orange lighten-1")
v-tabs-item(ripple v-for="i in items" :key="i" :href="'#' + i")
v-tabs-slider(class="warning")
//- 起步价页面
v-tabs-content(:key="items[0]" :id="items[0]")
v-card
v-card-text
v-contain(fluid)
v-layout(row)
v-flex(xs6)
v-contain(fluid)
v-layout(row)
div(class="text-xs-center mt-4")
v-btn(@click="next" primary) 确定
v-btn(@click="last" ) 取消
<script>
export default {
data () {
return {
add: false,
menu: false,
menu1: false,
alert: false,
e1: null,
e2: null,
e3: null,
e4: null,
e5: 'checkbox-3',
e6: 'checkbox-5',
items: [
'起步价',
'超距离/规格价',
'溢价',
'配送时间'],
active: null,
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
itemss: [
{ text: '区域名称1' },
{ text: '区域名称2' },
{ text: '区域名称3' },
{ text: '区域名称4' },
{ text: '区域名称5' },
{ text: '区域名称6' },
{ text: '全部' }
]
}
},
methods: {
next () {
this.active = this.items[(this.items.indexOf(this.active) + 1) % this.items.length]
},
last () {
this.active = this.items[(this.items.indexOf(this.active) - 1) % this.items.length]
}
}
}
</script>
哈哈哈学到后面直接做项目实践了6666
最后附上vuetify.js网址