vue nbsp スペースが機能しない

Vue では、スペースを置換するために   を使用することがありますが、  が機能せず、依然としてスペースが表示されることがわかります。どうしてこれなの？この記事では、この問題を調査し、解決する方法を紹介します。

まず、  とスペースの違いを理解する必要があります。   は、非改行スペース (非改行スペース) を表す HTML エンティティ文字です。つまり、この位置では改行と単語のハイフネーションは許可されません。通常のスペースは、改行や段落区切りが必要な場合に自動的に分割される可能性があるため、通常は   を使用して、改行が許可されない位置にスペースの隙間を設けます。

Vue では、v-html ディレクティブを使用して、HTML 文字列をページ上に動的にレンダリングできます。たとえば、次のように記述できます:

<template>
  <div v-html="htmlStr"></div>
</template>
<script>
export default {
  data() {
    return {
      htmlStr: 'hello world'
    }
  }
}
</script>

ただし、ページで hello world を取得しようとすると、  が機能しないことがわかります。 、まだスペースが表示されます。

それでは、なぜこの問題が発生するのでしょうか?これは、Vue の v-html ディレクティブが XSS 攻撃を防ぐために入力 HTML 文字列を自動的にエスケープするためです。 Vue は特殊文字 (f0716db3133e0490abbaa904fd4133e5、&、'、"、など) 対応する HTML エンティティ文字に変換します。

エンティティ文字   については、Vue はそれを実際の非改行スペースに変換しません。これは互換性を維持するためです。場合によっては、  をエンティティ文字ではなく文字列として扱う必要があるため、Vue はデフォルトで   をエスケープしません。 Vue の

v-html

ディレクティブは   を正しく解析しないため、この問題をどのように解決すればよいでしょうか? 参考のために 2 つの方法を示します。1.スペースバー

最も簡単な方法は、

 

の代わりに通常のスペースバーを使用することです。たとえば、次のように書くことができます:

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

このように、エスケープを気にせずに、文字列

hello world

を正しく取得できます。2. 本当に

 # を使用する必要がある場合は、正規表現を使用して

を置き換えます。 ## スペースバーの代わりに、正規表現を使用して実際の非改行スペースに置き換えることができます。たとえば、次のように記述できます:

<template>
  <div v-html="htmlStr"></div>
</template>
<script>
export default {
  data() {
    return {
      htmlStr: 'hello world'
    }
  },
  computed: {
    unescapeHtml() {
      return this.htmlStr.replace(/ /g, 'u00A0');
    }
  }
}
</script>

上記のコード computed

##htmlStr

の # 属性は、すべての   を実際の非改行スペース文字に置き換え、置き換えられた結果を返します。テンプレートでは、v-html を使用できます。ディレクティブを作成し、unescapeHtml 計算プロパティを呼び出します:

<template>
  <div v-html="unescapeHtml"></div>
</template>

この方法で、hello world この文字列を正しく取得できます。 Vue、

 

は、通常の HTML 文字列のように期待どおりに動作しません。必要なのは、より柔軟なメソッドです。この問題を解決してください。スペースバーや正規表現などのメソッドを使用することで、この問題を回避でき、正しい結果が得られます。

以上がvue nbsp スペースが機能しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。