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：表示隐藏文本框底部错误信息。
（9）required：是否为必填项，如果是，会在label后加*，不具备校验功能。默认是false；
（10）rows：文本域的行数，multi-line为true时才有效；
（11）single-line：是否单行文本显示，默认是false。

 <v-flex xs6>
      <v-text-field   label="搜索" hide-details append-icon="search" v-model="key">
       </v-text-field>
 </v-flex>