分类：VANT教程

Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库，可以快速搭建出风格统一的页面，提升效率。

Vant SwitchCell 开关单元格

废弃提示 SwitchCell 组件将在 3.0 版本中废弃，请直接使用 Cell 和 Switch 组件代替引入 import Vue from 'vue'; import { SwitchCell } from 'vant'; Vu...

AI君 3个月前 (03-06) 22℃ 2喜欢

VANT教程

Vant Sku 商品规格

引入 import Vue from 'vue'; import { Sku } from 'vant'; Vue.use(Sku); 代码演示基础用法 <van-sku v-model="show" :sku="sku...

AI君 3个月前 (03-06) 20℃ 0喜欢

VANT教程

Vant SubmitBar 提交订单栏

引入 import Vue from 'vue'; import { SubmitBar } from 'vant'; Vue.use(SubmitBar); 代码演示基础用法 <van-submit-bar :price=...

AI君 3个月前 (03-06) 20℃ 0喜欢

VANT教程

Vant GoodsAction 商品导航

引入 import Vue from 'vue'; import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'; Vue.use(GoodsAction);...

AI君 3个月前 (03-06) 19℃ 1喜欢

VANT教程

Vant Coupon 优惠券选择器

引入 import Vue from 'vue'; import { CouponCell, CouponList } from 'vant'; Vue.use(CouponCell); Vue.use(CouponList); 代码演...

AI君 3个月前 (03-06) 18℃ 0喜欢

VANT教程

Vant Contact 联系人

介绍通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。引入 import Vue from 'vue'; import { ContactCard, ContactList, ContactEdit } from 'va...

AI君 3个月前 (03-06) 19℃ 0喜欢

VANT教程

Vant Card 卡片

引入 import Vue from 'vue'; import { Card } from 'vant'; Vue.use(Card); 代码演示基础用法 <van-card num="2" price="2.00" ...

AI君 3个月前 (03-06) 24℃ 0喜欢

VANT教程

Vant Area 省市区选择

介绍省市区三级联动选择，通常与弹出层组件配合使用引入 import Vue from 'vue'; import { Area } from 'vant'; Vue.use(Area); 代码演示基础用法要初始化一个Area...

AI君 3个月前 (03-06) 47℃ 0喜欢

VANT教程

Vant AddressList 地址列表

引入 import Vue from 'vue'; import { AddressList } from 'vant'; Vue.use(AddressList); 代码演示基础用法 <van-address-list v...

AI君 3个月前 (03-06) 21℃ 0喜欢

VANT教程

Vant AddressEdit 地址编辑

引入 import Vue from 'vue'; import { AddressEdit } from 'vant'; Vue.use(AddressEdit); 代码演示基础用法 <van-address-edit :...

AI君 3个月前 (03-06) 38℃ 0喜欢

VANT教程

Vant TreeSelect 分类选择

引入 import Vue from 'vue'; import { TreeSelect } from 'vant'; Vue.use(TreeSelect); 代码演示单选模式 item为分类显示所需的数据，数据格式见下方示例。m...

AI君 3个月前 (03-06) 17℃ 1喜欢

VANT教程

Vant Tabbar 标签栏

引入 import Vue from 'vue'; import { Tabbar, TabbarItem } from 'vant'; Vue.use(Tabbar); Vue.use(TabbarItem); 代码演示基础用法 v...

AI君 3个月前 (03-06) 17℃ 0喜欢

VANT教程

Vant Tab 标签页

引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant'; Vue.use(Tab); Vue.use(Tabs); 代码演示基础用法通过v-model绑定当前激活标签对应...

AI君 3个月前 (03-06) 17℃ 0喜欢

VANT教程

Vant Sidebar 侧边导航

引入 import Vue from 'vue'; import { Sidebar, SidebarItem } from 'vant'; Vue.use(Sidebar); Vue.use(SidebarItem); 代码演示基础...

AI君 3个月前 (03-06) 17℃ 1喜欢

VANT教程

Vant Pagination 分页

引入 import Vue from 'vue'; import { Pagination } from 'vant'; Vue.use(Pagination); 代码演示基础用法 <van-pagination v-mo...

AI君 3个月前 (03-06) 13℃ 0喜欢

VANT教程

Vant NavBar 导航栏

引入 import Vue from 'vue'; import { NavBar } from 'vant'; Vue.use(NavBar); 代码演示基础用法 <van-nav-bar title="标题" lef...

AI君 3个月前 (03-06) 17℃ 0喜欢

VANT教程

Vant IndexBar 索引栏

引入 import Vue from 'vue'; import { IndexBar, IndexAnchor } from 'vant'; Vue.use(IndexBar); Vue.use(IndexAnchor); 代码演示 ...

AI君 3个月前 (03-06) 16℃ 0喜欢

VANT教程

Vant Grid 宫格

介绍宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航引入 import Vue from 'vue'; import { Grid, GridItem } from 'vant'; Vue.use(Grid);...

AI君 3个月前 (03-06) 14℃ 1喜欢

VANT教程

Vant Tag 标记

引入 import Vue from 'vue'; import { Tag } from 'vant'; Vue.use(Tag); 代码演示基础用法通过type属性控制标签颜色，默认为灰色 <van-tag>标签&l...

AI君 3个月前 (03-06) 15℃ 1喜欢

VANT教程

Vant Swipe 轮播

引入 import Vue from 'vue'; import { Swipe, SwipeItem } from 'vant'; Vue.use(Swipe); Vue.use(SwipeItem); 代码演示基础用法每个 Sw...

AI君 3个月前 (03-06) 15℃ 0喜欢