Vue.js特殊字符渲染异常求助：欧元符号显示错误

安全阿岳

2026-5-22

解决Vue过滤器中欧元符号渲染乱码的问题

我之前也碰到过类似的特殊字符渲染乱码情况，你的问题核心是字符编码不匹配导致欧元符号€被解析成了乱码â‚¬，可以从这几个方面来修复：

确保HTML页面的编码设置正确
首先检查你的根HTML文件（比如index.html）的<head>标签里有没有添加UTF-8的meta声明，这是最基础也最关键的一步：
```
<meta charset="UTF-8">
```
如果没有这个声明，浏览器可能会用默认的编码解析页面，特殊字符就会出现乱码。
改用Unicode转义字符替代直接写欧元符号
有时候你的.vue或.js文件如果不是以UTF-8编码保存，直接写的€会被损坏。可以把过滤器里的欧元符号换成对应的Unicode转义码\u20AC，这样不管文件编码如何，都能正确渲染：
```
filters: {
  formatPrice() {
    return "\u20AC" + (2000 / 100).toFixed(2)
  }
}
```
用HTML实体配合v-html渲染（备选方案）
如果你想用HTML实体€，要注意Vue的双大括号{{ }}会自动转义HTML实体，所以需要改用v-html指令来渲染内容：
先修改过滤器返回实体：
```
filters: {
  formatPrice() {
    return "&euro;" + (2000 / 100).toFixed(2)
  }
}
```
然后把模板里的代码改成：
```
<p class="price" v-html="product.price | formatPrice"></p>
```
检查代码文件的保存编码
最后确认你的编辑器是把.vue和.js文件以UTF-8编码保存的，有些老编辑器默认用GBK之类的编码，会导致文件里的特殊字符本身就已经损坏了。