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:：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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

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