Comment conserver les espaces dans les chaînes en vue

Dans Vue, il est très simple de supprimer les espaces des chaînes. Lors du rendu d'une chaîne dans un modèle Vue, il supprime automatiquement les espaces des deux côtés. Cependant, dans certains cas, on peut vouloir conserver les espaces dans la chaîne, que faire dans ce cas ? Ensuite, je présenterai deux méthodes pour résoudre ce problème.

Méthode 1 : Utiliser des entités HTML

Les entités HTML dans Vue peuvent être utilisées pour remplacer des caractères spéciaux, tels que des espaces. En HTML, l'entité correspondant à un espace est " ". Nous pouvons remplacer les espaces par cette entité afin que les espaces soient préservés lors du rendu du modèle. Un exemple est le suivant :

<template>
  <div>
    <!-- 使用HTML实体保留空格 -->
    <p>{{ content.replace(/\s/g, ' ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'hello     world'
    }
  }
}
</script>

Dans le code ci-dessus, j'ai remplacé tous les espaces de la chaîne par des entités HTML " ". Dans le modèle, cette entité sera analysée en caractère d'espace pour préserver l'espace.

Méthode 2 : Utiliser les styles CSS

En plus d'utiliser des entités HTML, nous pouvons également utiliser des styles CSS pour contrôler l'affichage des espaces. Plus précisément, vous pouvez utiliser l'attribut "white-space" et définir sa valeur sur "pre-wrap" afin que les espaces dans la chaîne soient préservés. Un exemple est le suivant :

<template>
  <div>
    <!-- 使用CSS样式保留空格 -->
    <p :style="{ whiteSpace: &#39;pre-wrap&#39; }">{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'hello     world'
    }
  }
}
</script>

La liaison de style utilise ici la directive ":style" dans Vue, qui peut appliquer les propriétés et les valeurs CSS​​dans un objet JavaScript aux éléments. Dans cet exemple, j'ai défini la valeur de l'attribut "whiteSpace" sur "pre-wrap" afin que les espaces soient préservés et affichés normalement dans le modèle.

Résumé

Voici deux méthodes pour conserver les espaces de chaîne dans Vue. Choisissez simplement la méthode appropriée en fonction de la situation réelle. Lors de l’écriture de code, il est très important de maintenir un format de chaîne cohérent car cela rend notre code plus facile à lire et à maintenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!