Your search did not match any results.
Number Box



This demo shows how to specify the currency, accounting, percent and other formats using the format option. It makes the NumberBox not only format the display value, but also control the user input.

Copy to CodeSandBox
<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Currency format</div> <div class="dx-field-value"> <dx-number-box :value="14500.55" format="$ #,##0.##" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Accounting format</div> <div class="dx-field-value"> <dx-number-box :value="-2314.12" format="$ #,##0.##;($ #,##0.##)" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Percent format</div> <div class="dx-field-value"> <dx-number-box :value="0.15" :step="0.01" format="#0%" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Fixed point format</div> <div class="dx-field-value"> <dx-number-box :value="13415.24" format="#,##0.00" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Weight format</div> <div class="dx-field-value"> <dx-number-box :value="3.14" format="#0.## kg" /> </div> </div> </div> </div> </template> <script> import { DxNumberBox } from 'devextreme-vue'; export default { components: { DxNumberBox } }; </script> <style scoped> .dx-field { margin-bottom: 20px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': '' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });