Vue.js如何转义特殊字符@以打印对象属性？

嘿，这个问题我之前踩过坑！当你的对象属性名包含@这类特殊字符时，直接用点语法data.@attributes.value肯定会报错，因为Vue的模板表达式遵循JavaScript语法规则，而JavaScript里点语法不支持带特殊字符的属性名。

正确的解决方式：使用方括号语法 #

把点语法换成方括号+字符串形式来访问属性，这样就能避开特殊字符的解析问题了。修改后的代码如下：

<div>{{ data.author }}</div>
<div>{{ data['@attributes'].value }}</div>

原理说明 #

在JavaScript中，当对象的属性名包含特殊字符（比如@、#、空格）、或者是JavaScript保留字时，必须通过对象['属性名']的形式来访问属性值，而不能用对象.属性名的点语法。Vue模板里的表达式本质就是JavaScript代码，所以遵循同样的规则。

扩展：在Vue脚本中访问的写法 #

如果需要在Vue的methods、computed或者其他脚本逻辑里访问这个属性，也是同样的写法：

export default {
  data() {
    return {
      data: { 
        author: "john", 
        "@attributes": { value: 1 } 
      }
    };
  },
  computed: {
    attributesValue() {
      return this.data['@attributes'].value;
    }
  }
}

这样不管是模板里还是脚本里，都能正常获取到value的值1啦！

内容的提问来源于stack exchange，提问作者jorgetutor