Vue.js模板中超链接无法渲染，仅字符串正常显示问题求助

这个问题我之前也碰到过，核心原因是你在HTML属性里直接用了双大括号插值，这在Vue里是不规范的写法——浏览器会把{{ attrib.link }}当成字符串的一部分解析成URL内容，里面的{和}属于URL中的无效字符，自然就触发报错了。

正确的写法应该是这样： #

用Vue的v-bind指令（或者简写的冒号:）来绑定href属性，这样Vue才会正确解析变量的实际值，而不是把插值语法当成URL的一部分：

<a target='_blank' :href="attrib.link" style="color: #880000">{{ attrib.file }}</a>

为什么直接打印没问题？ #

因为在HTML内容里使用{{ attrib.link }}是Vue支持的文本插值方式，Vue会自动把双大括号替换成变量的真实值，所以能正常显示；但在HTML属性中，这种写法不会被Vue处理，浏览器会直接把整个{{ attrib.link }}字符串作为href的值，这才导致了无效字符的错误。

如果之后还是有问题，可以再确认下attrib.link的值本身是否包含特殊字符，但既然直接打印正常，大概率就是属性绑定的写法问题啦。

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