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

Question

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

https://element.eleme.io/#/en-US/component/input-number

我想在 Vuetify 中使用类似的东西，但我在 Material Design 中找不到类似的组件甚至类似的样式示例。实现它的最佳方法是什么？

原文由 Tutu Kaeen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新：此答案适用于 Vuetify 的版本 1， yukashima huksay 的答案 对于较新版本的 Vuetify 是正确的。

将 type 属性设置为 type="number" 是可行的方法。

原文：

你可以自己做：

 new Vue({
  el: '#app',
  data () {
     return {
       foo: 0
     }
  },
  methods: {
    increment () {
      this.foo = parseInt(this.foo,10) + 1
    },
    decrement () {
      this.foo = parseInt(this.foo,10) - 1
    }
  }
})

 <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-text-field v-model="foo" type="number" label="Number" append-outer-icon="add" @click:append-outer="increment" prepend-icon="remove" @click:prepend="decrement"></v-text-field>
        </v-container>
      </v-content>
    </v-app>
  </div>

原文由 Brian Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就在这里：

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

查看 滑块组件文档 以获取工作示例。

原文由 yukashima huksay 发布，翻译遵循 CC BY-SA 4.0 许可协议