# vue: URL: https://generaltranslation.com/fr/docs/vue/reference/components/num.mdx --- title: "" description: Formate un nombre selon le paramètre régional actif. Référence de l’API du composant . --- Le composant `` formate une `value` numérique requise à l’aide de `Intl.NumberFormat`. Utilisez-le seul ou comme variable d’exécution dans [``](/docs/vue/reference/components/t). ## Vue d’ensemble [#overview] Liez le nombre à l’aide de `value` et laissez le composant autofermant : ```vue ``` Le formatage est effectué localement. La valeur numérique n’est ni traduite ni incluse dans la source de traduction enrichie. ## Fonctionnement [#how-it-works] * Un nombre est transmis directement à `Intl.NumberFormat`. * Une chaîne doit représenter un nombre complet. Les chaînes composées uniquement d'espaces et `null` s'affichent vides ; une chaîne numérique non valide s'affiche telle quelle. * Les éléments enfants du composant de formatage sont ignorés. Fournissez toujours `value` et utilisez une balise autofermante. * Le composant n'ajoute aucun conteneur HTML. ### Résolution de paramètre régional Lorsque le paramètre régional actif correspond au paramètre régional par défaut configuré, le formatage utilise uniquement ce dernier et ignore `locales`. Pour tout autre paramètre régional actif, un formateur autonome essaie d’abord les `locales` explicites, puis le paramètre régional actif et enfin le paramètre régional par défaut. Les paramètres régionaux en double sont supprimés sans modifier leur ordre. Dans [``](/docs/vue/reference/components/t), la traduction enrichie contrôle le formatage : le contenu de secours source utilise le paramètre régional par défaut, tandis que le contenu traduit essaie le paramètre régional actif, puis le paramètre régional par défaut. Une prop `locales` explicite est alors ignorée. ## Props [#props] | Prop | Description | Type | facultatif | Par défaut | | --------------------- | ------------------------------------------- | -------------------------- | ---------- | -------------------------------------------- | | [`value`](#value) | Valeur numérique à formater. | `number \| string \| null` | Non | — | | [`options`](#options) | Options transmises à `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Oui | `{}` | | [`locales`](#locales) | Paramètres régionaux de formatage préférés. | `string[]` | Oui | Ordre de résolution des paramètres régionaux | ### `value` **Type** `number | string | null` · **Obligatoire** La valeur numérique entière à formater. Les chaînes numériques sont converties avec `Number()` avant le formatage. Les valeurs telles que `"12 items"` ou `"1,234.5"` ne sont pas analysées partiellement et s’affichent sans modification. ```vue ``` ### `options` **Type** `Intl.NumberFormatOptions` · **Facultatif** · **Par défaut** `{}` Options transmises à l'implémentation `Intl.NumberFormat` de l'environnement d'exécution JavaScript. Les options courantes incluent : | Option | Description | Type | Facultatif | Par défaut | | -------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------- | --------------------------------------------- | | `localeMatcher` | Algorithme de correspondance des paramètres régionaux. | `'lookup' \| 'best fit'` | Oui | `'best fit'` | | `numberingSystem` | Système de numération, tel que `latn` ou `arab`. | `string` | Oui | Dépend du paramètre régional | | `style` | Formatage décimal, en pourcentage, de devise ou d'unité. | `'decimal' \| 'percent' \| 'currency' \| 'unit'` | Oui | `'decimal'` | | `currency` | Code ISO 4217 requis par le style de devise. | `string` | Oui | — | | `currencyDisplay` | Mode d'affichage d'une devise. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Oui | `'symbol'` | | `unit` | Identifiant d'unité requis par le style d'unité, tel que `kilometer`. | `string` | Oui | — | | `unitDisplay` | Largeur du libellé de l'unité. | `'long' \| 'short' \| 'narrow'` | Oui | `'short'` | | `minimumIntegerDigits` | Nombre minimal de chiffres entiers. | `number` | Oui | `1` | | `minimumFractionDigits` | Nombre minimal de chiffres fractionnaires. | `number` | Oui | Dépend du style | | `maximumFractionDigits` | Nombre maximal de chiffres fractionnaires. | `number` | Oui | Dépend du style | | `minimumSignificantDigits` | Nombre minimal de chiffres significatifs. | `number` | Oui | `1` | | `maximumSignificantDigits` | Nombre maximal de chiffres significatifs. | `number` | Oui | `21` | | `useGrouping` | Conditions d'affichage des séparateurs de groupement. | `boolean \| string` | Oui | Dépend de la notation | | `notation` | Notation numérique. | `'standard' \| 'scientific' \| 'engineering' \| 'compact'` | Oui | `'standard'` | | `compactDisplay` | Largeur du libellé de notation compacte. | `'short' \| 'long'` | Oui | `'short'` | | `signDisplay` | Conditions d'affichage d'un signe. | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Oui | `'auto'` | | `roundingMode` | Sens utilisé lors de l'arrondi. | `string` | Oui | Dépend de l'environnement d'exécution | Les valeurs par défaut des chiffres fractionnaires dépendent du `style` sélectionné. Les champs et valeurs pris en charge peuvent également varier selon l'environnement d'exécution JavaScript. Consultez les [options de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) pour connaître l'ensemble complet défini par l'environnement d'exécution. ### `locales` **Type** `string[]` · **Facultatif** · **Par défaut** Ordre de résolution des paramètres régionaux Codes de langue BCP 47 privilégiés pour le formatage autonome. Ils sont utilisés avant les paramètres régionaux actif et par défaut, uniquement lorsque le paramètre régional actif n’est pas celui configuré par défaut. ```vue ``` ## Exemples [#examples] ```vue title="InventorySummary.vue" ```