Vueで文字列内のスペースを保持する方法

Vue では、文字列からスペースを削除するのは非常に簡単です。 Vue テンプレートで文字列をレンダリングすると、両側のスペースが自動的に削除されます。ただし、場合によっては、文字列内のスペースを保持したい場合があります。この場合はどうすればよいでしょうか?次に、この問題を解決する 2 つの方法を紹介します。

方法 1: HTML エンティティを使用する

Vue の HTML エンティティを使用して、スペースなどの特殊文字を置き換えることができます。 HTML では、スペースに相当するものは「 」です。テンプレートをレンダリングするときにスペースが保持されるように、スペースをこのエンティティに置き換えることができます。例は次のとおりです。

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

<script>
export default {
  data() {
    return {
      content: &#39;hello     world&#39;
    }
  }
}
</script>

上記のコードでは、文字列内のすべてのスペースを HTML エンティティ " " に置き換えました。テンプレートでは、このエンティティはスペースを保持するためにスペース文字に解析されます。

方法 2: CSS スタイルを使用する

HTML エンティティの使用に加えて、CSS スタイルを使用してスペースの表示を制御することもできます。具体的には、「white-space」属性を使用し、その値を「pre-wrap」に設定すると、文字列内のスペースが保持されます。例は次のとおりです。

<template>
  <div>
    <!-- 使用CSS样式保留空格 -->
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: &#39;hello     world&#39;
    }
  }
}
</script>

ここでのスタイル バインディングでは、Vue の「:style」ディレクティブを使用します。これにより、JavaScript オブジェクト内の CSS プロパティと値を要素に適用できます。この例では、スペースが保持され、テンプレート内で通常どおり表示されるように、「whiteSpace」属性の値を「pre-wrap」に設定します。

概要

上記は Vue で文字列スペースを保持する 2 つの方法です。実際の状況に応じて適切な方法を選択してください。コードを記述するときは、一貫した文字列形式を維持することが非常に重要です。これにより、コードが読みやすく、保守しやすくなります。

以上がVueで文字列内のスペースを保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。