vuetify学习第6天之v-btn-toggle---按钮组

vuetify学习第6天之v---btn-toggle---按钮组

文章目录

1、常见应用场景
2、常用属性和事件
3、应用实践
4、后记

内容

1、常见应用场景

应用场景：工具栏按钮组单选—排列按钮，工具栏按钮组多选—文本加粗、倾斜等
图示1-1：
源代码：官网地址：https://vuetifyjs.com/en/components/button-groups/

2、常用属性和事件

属性：

名称	类型	默认值	介绍
vlaue	any	undefied	默认选中的按钮值
mandatory	boolean	false	按钮组是否默认必选一个
multiple	boolean	false	是否可以多选

事件：

名称	描述	value
change	emitted when the input is changed by user interanciton /当用户选择改变的时候触发	any[] 或者 any

3、应用实践

图示3-1：
源代码3-1:：

<template>...<v-flex xs3>状态：<v-btn-toggle rounded mandatory v-model.lazy="filter.saleable" @change="filterChanged"><v-btn flat small :value="2">全部</v-btn><v-btn flat small :value="1">上架</v-btn><v-btn flat small :value="0">下架</v-btn></v-btn-toggle></v-flex>...
</template><javascript>...filter: { saleable: 1 // value对应的默认值......// change事件对象处理函数filterchanged() {}...
</javascript>

说明：v-btn-toggle value既v-model绑定的默认值与按钮组中v-btn的value值对应时，按钮才被选中。v-btn不赋值默认为自然数系列，既0,1,2，…，n 。强烈建议v-btn与v-btn-toggle取相同类型的值
效果图示:
- 3-2-默认上架:
- 3-3下架:
- 3-4全部:

4、后记

整页源代码参考博文’ 原创仿乐优商城后台管理-前端vue+后端thinkphp5.1+数据库mysql项目开发----前端第三天’

本项目为参考某马视频thinkphp5.1-乐优商城前后端项目开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue-leyou
后端thinkphp源代码地址:https://gitee.com/gaogzhen/leyou-backend-thinkphp

vuetify学习第6天之v-btn-toggle---按钮组相关推荐

vuetify 学习第二天之v-combobox-自定义级联组件v-cascader封装
vuetify学习第二天之v-combobox 目录文章目录 0.简介 1.iview之cascader组件 1.1.简介 1.2.常用属性 1.2.1.详细描述 1.2.1.1.data 1.2. ...
查看oracle 导出进程,【学习笔记】Oracle 通过v$session查看imp进程信息的案例
天萃荷净运维DBA反映需求在执行Oracle imp导入时需要查看导入的进程信息,通过v$session分析imp导入进程在服务器端v$session中的username列不是imp登陆用户名,而是 ...
【Vuetify】Vue 整合 Vuetify 学习分享
[Vuetify]Vue 整合 Vuetify 学习分享 Vuetify Material 风格演示 Vuetify 实乃设计废福音,他的颜值目前来讲是所有框架中我最喜欢的→_→ 大家可以先点击上方的 ...
vuetify学习第四天-典型导航菜单实现
vuetify学习第四天-典型导航菜单实现目录文章目录 1.效果图示 2.源代码 3.布局 2.1.主要所用vuetify组件: 2.1.1.v-navigation-drawer:导航菜单 2. ...
QT系统学习系列：1.2 PushButton（常规按钮）
文章目录一.PushButton 基础 PushButton介绍给PushButton添加快捷键 PushButton构造函数 PushButton添加/更改(图标,文本,父类) PushButt ...
影像组学视频学习笔记(35)-基于2D超声影像的影像组学特征提取、Li‘s have a solution and plan.
作者:北欧森林链接:https://www.jianshu.com/p/f82d30289d68 来源:简书,已获转载授权 RadiomicsWorld.com "影像组学世界" ...
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮
陈表达VBA学习笔记-新建工作表鼠标右键菜单按钮:新建一个我的菜单按钮设置对应的宏过程名称为 [我的菜单宏] 点击按钮弹窗信息,信息可自定义设置详细代码如下: Sub 新建右键菜单()Dim 菜单 ...
学习动态性能表(3)--v$sqlv$sql_plan
学习动态性能表第三篇-(1)-v$sq 2007.5.25 V$SQL中存储具体的SQL语句. 一条语句可以映射多个cursor,因为对象所指的cursor可以有不同用户(如例1).如果有多个cur ...
学习动态性能表(20)--v$waitstat
学习动态性能表第20篇--V$WAITSTAT 2007.6.15 本视图保持自实例启动所有的等待事件统计信息.常用于当你发现系统存在大量的"buffer busy waits" ...
学习动态性能表(10)--v$session_longops
学习动态性能表第十篇--V$SESSION_LONGOPS 2007.6.7 本视图显示运行超过6秒的操作的状态.包括备份,恢复,统计信息收集,查询等等. 要监控查询执行进展状况,你必须使用cos ...

vuetify学习第6天之v-btn-toggle---按钮组

vuetify学习第6天之v---btn-toggle---按钮组

目录

文章目录

内容

1、常见应用场景

2、常用属性和事件

3、应用实践

4、后记

vuetify学习第6天之v-btn-toggle---按钮组相关推荐

最新文章

热门文章