摘要：在 Vue 中去除下划线，可使用以下方法：字符串替换：简单粗暴，但不适用于下划线数量或位置不固定时。计算属性：使用正则表达式将下划线转换为驼峰命名法，性能优于字符串替换。过滤器：简洁明了，但数据更新时会重新执行，影响性能。数据源头处理：与后端协商，将下划线在数据获取时转换为驼峰命名法，是最彻底的解决方案。
Vue里干掉下划线：那些你可能不知道的技巧
很多朋友在用Vue的时候，会遇到一些带下划线的属性或数据，看着别扭，想把它去掉。这篇文章就来聊聊怎么优雅地解决这个问题，顺便分享一些我踩过的坑和一些奇技淫巧。
这篇文章的目标是让你彻底掌握在Vue中处理下划线的各种方法，从最简单的字符串替换到利用计算属性的巧妙运用，甚至包括一些更高级的技巧，让你在面对各种下划线问题时游刃有余。读完后，你不仅能解决眼前的问题，还能提升对Vue数据处理的理解。
先说基础，Vue的数据绑定机制。Vue会自动将你的data里的数据映射到模板上。如果你的数据是user_name，在模板里直接用{{ userName }}是访问不到的。这是因为Vue默认使用驼峰命名法。
那怎么解决？最简单的，也是很多人想到的，就是用字符串替换。
data() {
return {
user_name: 'John Doe'
}
},
computed: {
userName() {
return this.user_name.replace('_', '');
}
}
在模板里用{{ userName }}就能显示John Doe了。简单粗暴，但这种方法有个问题，就是如果下划线不止一个，或者位置不固定，就需要写更复杂的正则表达式，代码可读性和维护性都会下降。而且，每次访问都需要进行字符串替换，性能上也略有损耗，尤其是在数据量大的时候。
更好的方法是利用Vue的计算属性。上面已经给了一个简单的例子，但我们可以做得更好。比如，我们可以写一个通用的方法：
methods: {
camelCase(str) {
return str.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());
}
}
这个方法用正则表达式，可以将任何带下划线的字符串转换成驼峰命名法。然后在计算属性里调用：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
computed: {
userName() {
return this.camelCase(this.user_name);
}
}
这样，无论user_name有多少个下划线，都能正确处理。而且，这个camelCase方法还可以复用在其他地方。
再高级一点，我们可以利用Vue的过滤器。过滤器可以让你对数据进行预处理，然后在模板中直接使用。
filters: {
camelCase(str) {
return str.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());
}
}
然后在模板里：
{{ user_name | camelCase }}
这方法简洁明了，可读性更好。但是，过滤器在数据更新时会重新执行，如果数据量很大，性能可能会受到影响。
最后，也是最推荐的方法，是在数据获取的时候就处理好。如果你的数据是从后端获取的，最好在后端就将下划线转换成驼峰命名法。这样，前端就不用再处理了，性能最好，代码也最简洁。 这需要和后端工程师沟通协调，但这是最彻底的解决方案。
记住，选择哪种方法取决于你的具体情况。如果只是个别属性，简单的字符串替换就够了；如果有很多属性，或者需要复用，计算属性或过滤器是更好的选择；如果数据量很大，或者追求极致性能，最好在数据源头解决问题。 别忘了考虑代码的可读性和可维护性，这在长期项目中至关重要。 选对方法，才能写出优雅高效的Vue代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
