vue nbsp spaces not working

In Vue, sometimes we use   to replace spaces, but find that   does not work and spaces still appear. Why is this? In this article, we will explore this issue and provide ways to resolve it.

First of all, we need to understand the difference between   and spaces.   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   is usually used to provide space gaps in positions where breakage is not allowed.

In Vue, we can use the v-html directive to dynamically render HTML strings onto the page. For example, we can write like this:

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

However, when we try to get hello world on the page, we will find that   does not work, still A space appears.

So, why does this problem occur? This is because the v-html directive in Vue will automatically escape the input HTML string to prevent XSS attacks. Vue will treat special characters (such as 68d687f5a0cabed7ef4cbdc5e9d691b0, &, ', ", etc.) Convert to their corresponding HTML entity characters.

As for the entity character  , Vue will not convert it into a real non-breaking space. This is to maintain compatibility , because in some cases,   does need to be treated as a string rather than an entity character. Therefore, Vue will not escape   by default .

Since the v-html directive in Vue will not parse   correctly, how do we solve this problem? Here are two methods for reference .

1. Use the space bar

The easiest way is to use the normal space bar instead of . For example, we can write like this:

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

In this way, we can correctly get the string hello world without worrying about escaping.

2. Use regular expressions to replace

if We really need to use   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:

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

The above code The computed attribute in htmlStr replaces all   with actual non-breaking space characters and returns the replaced result. In the template, We can use the v-html directive and call the unescapeHtml calculated property:

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

In this way, we can correctly get hello world This string.

In summary, in Vue,   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.

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!