vuetify學習第6天之v-btn-toggle---按鈕組

vuetify學習第6天之v---btn-toggle---按鈕組

---

目錄

---

---

內容

---

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