v-bind 和 双花括号的关系

Question

为什么 vue 在标签动态绑定属性的时候不能直接使用双花括号，而要使用 v-bind 指令，看官网上说双花括号是属于 Mustache 语法，而 Mustache 语法不能作用在 HTML attribute 上，可以说一下具体为什么不能作用在 HTML attribute 上吗

Answer 1

双越 2021-04-10 16:48:20

如果非要实现，我觉得是可以实现的，例如 jsx 中就可以这样 <a href={link}>xx</a> 

只不过，vue 的模板用的是标准的 html 语法，即属性值必须有双引号包裹（如 href="xxx.com/index.html"）。

如此一来，如果再引入 {{xxx}} ，那就会导致结构很乱 href="{{link}}" ，看起来很复杂，新手学习成本、出错概率都很高。

• 香饽饽0 #1

  小程序原生语法就是这样的 😂

Answer 2

双越 2021-04-10 10:02:02

你想把 <a v-bind:href="link">xxx</a> 换成 <a href="{{link}}">xxx</a> 这样的吗？

• 提问者 所向无一 #1

  是的，我的意思是为什么vue还需要通过v-bind去绑定，不直接使用双花括号，具体是哪里实现不了？