Javascript Vuetify中是否有特定的数字输入组件？

我在Element UI中看到了一个用于管理项目数量的组件，它在这里：

---

我想在Vuetify中使用类似的东西，但在材质设计中找不到类似的组件，甚至找不到类似的样式示例。实现此目标的最佳方法是什么？

更新：此答案适用于Vuetify版本1，适用于Vuetify的较新版本

将

type

属性设置为

type=“number”

原件：

您可以自己制作：

newvue（{
el:“#应用程序”，
数据（）{
返回{
foo:0
}
},
方法：{
增量（）{
this.foo=parseInt（this.foo，10）+1
},
减量{
this.foo=parseInt（this.foo，10）-1
}
}
})

Vue vuetify代码 使用：rules=“maxRules”

导出默认值{
数据（）{
返回{
限额：500，
maxRules：[
（v） =>{
如果（this.text1>this.limit）{
返回“错误”
}
}
]
}
}
}

是的，有：

<v-text-field
  v-model="numberValue"
  hide-details
  single-line
  type="number"
/>

---

查看工作示例。

在vuetify.js v2.2.22中要将您的

转换为数字，您需要编写

v-model.number

<v-text-field 
v-model.number="foo" 
label="Number" 
append-outer-icon="add" 
@click:append-outer="increment" 
prepend-icon="remove" 
@click:prepend="decrement">
</v-text-field>

---

type=“number”被删除了

一些数字输入的概念在这里混淆了

我看不到在2.2.22中删除type=“number”，至少在2.3.10中，我还看到它被正确渲染

属性type=“number”的输入字段将根据浏览器、操作系统和区域设置进行不同的处理（例如，我仍然能够在FF中输入自由文本，但不能在Chrome中输入）。通常，智能手机上的键盘布局会发生变化

v-model.number纯粹是Vue的指令。如您所见，在内部，Vue只是尝试使用parseFloat解析输入，并在成功时使用它——否则它将是文本，并在Vue/JS中作为字符串处理

---

嗯，它只是一个有两个按钮的输入字段…很酷，如果type=“number”您甚至可以在右端设置上下按钮，那么它的工作方式有点。。。只要人们记住，您仍然可以手动输入非数值。@Hexodus

v-model.number

在这种情况下可以帮助您查看

.number

指令中的一些注释的不确定性答案。这有点误导。请参阅下面的不确定性答案<代码>v型。编号来自Vue而非Vuetify

type=“number”

来自HTML，而不是Vue或Vuetify。顺便说一句，v-model.number是个不错的选择，谢谢

type=“tel”

可能是首选：

type=“number”

引入了一些

tel

似乎没有的语法限制（可能是意外的）<代码>数字似乎不可用。

<v-text-field 
v-model.number="foo" 
label="Number" 
append-outer-icon="add" 
@click:append-outer="increment" 
prepend-icon="remove" 
@click:prepend="decrement">
</v-text-field>