vue nbsp spaces not working

<p>In Vue, sometimes we use <code> </code> to replace spaces, but find that <code> </code> does not work and spaces still appear. Why is this? In this article, we will explore this issue and provide ways to resolve it. </p> <p>First of all, we need to understand the difference between <code> </code> and spaces. <code> </code> is an HTML entity character that represents non-breaking space (non-breaking space), that is, line breaks and word hyphenation are not allowed at this position. Ordinary spaces can be automatically broken when a line break or paragraph break is required, so <code> </code> is usually used to provide space gaps in positions where breakage is not allowed. </p> <p>In Vue, we can use the <code>v-html</code> directive to dynamically render HTML strings onto the page. For example, we can write like this: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="htmlStr"></div> </template> <script> export default { data() { return { htmlStr: 'hello world' } } } </script></pre><div class="contentsignin">Copy after login</div></div><p> However, when we try to get <code>hello world</code> on the page, we will find that <code> </code> does not work, still A space appears. </p><p>So, why does this problem occur? This is because the <code>v-html</code> directive in Vue will automatically escape the input HTML string to prevent XSS attacks. Vue will treat special characters (such as <code><</code>, <code>></code>, <code>&</code>, <code>'</code>, <code>"</code>, etc.) Convert to their corresponding HTML entity characters. </p><p>As for the entity character <code> </code>, Vue will not convert it into a real non-breaking space. This is to maintain compatibility , because in some cases, <code> </code> does need to be treated as a string rather than an entity character. Therefore, Vue will not escape <code> </code> by default .</p><p>Since the <code>v-html</code> directive in Vue will not parse <code> </code> correctly, how do we solve this problem? Here are two methods for reference .</p><h3>1. Use the space bar</h3><p>The easiest way is to use the normal space bar instead of<code> </code>. For example, we can write like this:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div>{{msg}} world</div> </template> <script> export default { data() { return { msg: 'hello' } } } </script></pre><div class="contentsignin">Copy after login</div></div> <p>In this way, we can correctly get the string <code>hello world</code> without worrying about escaping. </p><h3>2. Use regular expressions to replace </h3><p>if We really need to use <code> </code> instead of the space bar, then we can use regular expressions to replace it with real non-breaking spaces. For example, we can write like this: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="htmlStr"></div> </template> <script> export default { data() { return { htmlStr: 'hello world' } }, computed: { unescapeHtml() { return this.htmlStr.replace(/ /g, 'u00A0'); } } } </script></pre><div class="contentsignin">Copy after login</div></div><p>The above code The <code>computed</code> attribute in <code>htmlStr</code> replaces all <code> </code> with actual non-breaking space characters and returns the replaced result. In the template, We can use the <code>v-html</code> directive and call the <code>unescapeHtml</code> calculated property: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><template> <div v-html="unescapeHtml"></div> </template></pre><div class="contentsignin">Copy after login</div></div><p>In this way, we can correctly get <code>hello world</code> This string. </p> <p>In summary, in Vue, <code> </code> does not work as expected like an ordinary HTML string. What we need is some more flexible methods. Solve this problem. By using methods such as spacebar or regular expressions, we can bypass this problem and get the correct results.</p>

The above is the detailed content of vue nbsp spaces not working. For more information, please follow other related articles on the PHP Chinese website!