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>