1. 程式人生 > >Vuetify筆記(3):v-btn按鈕和v-text-field文字

Vuetify筆記(3):v-btn按鈕和v-text-field文字

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文字框元件常用屬性

(1)append-icon:在文字框後面追加一個圖示,預設為String型別;
(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>