Vuetify筆記(3):v-btn按鈕和v-text-field文字
阿新 • • 發佈:2018-11-13
1、v-btn按鈕
在UI元件中v-btn元件是用一個material design主題和多個選項來替換標準的html按鈕。任何色彩輔助類都可以用來改變背景或文字的顏色。
v-btn按鈕常用屬性:
(1)flat:移除按鈕的背景色,布林值型別,預設為false;
(2)icon:將按鈕指定為圖示——原型和平面,布林值型別,預設為false;
(3)small:小型按鈕,布林值型別,預設為false;
【示例1】
<v-btn color="info" small>修改</v-btn> <v-btn color="error" large>刪除</v-btn>
【示例2】
<v-btn flat icon color="info">
<v-icon>edit</v-icon>
</v-btn>
<v-btn flat icon color="error">
<v-icon>delete</v-icon>
</v-btn>
2、 v-text-field文字
v-text-field文字框元件用於收集使用者提供的資訊。
v-text-field文字框元件常用屬性
(2)counter:為輸入長度建立一個計數器,如果未指定數字,則預設為25,不會應用任何驗證;型別為boolean|number|string;
(3)disabled:布林型別boolean不可見;
(4)multi-line:布林值型別,是否為多行文字,預設為false;
(5)name:欄位名,表單中會用到;
(6)label:提示文字;
(7)value:值。可以用v-model代替,實現雙向繫結。
(8)hide-details:表示隱藏文字框底部錯誤資訊。
<v-flex xs6> <v-text-field label="搜尋" hide-details append-icon="search" v-model="key"> </v-text-field> </v-flex>