Vue 2.0中如何修改Vue 1.0的链接绑定代码？

你遇到的问题是因为Vue 2.0对属性绑定的语法逻辑做了调整，直接在v-bind:href里写带变量的字符串不会被正确解析。这里给你两种可行的修改方案：

• 方案一：使用ES6模板字符串（推荐）
  用反引号包裹整个URL，通过${变量名}的方式嵌入动态值，语法清晰易读：

  <a :href="`http://en.wikipedia.org/?title=${obj.title}`" target="_blank">维基百科链接</a>
  

  这里的:href是v-bind:href的简写，是Vue 2.0里更常用的写法。

• 方案二：使用字符串拼接
  如果你的环境不支持ES6模板字符串，可以用传统的字符串加号拼接方式，注意要给静态字符串部分加引号：

  <a v-bind:href=" 'http://en.wikipedia.org/?title=' + obj.title " target="_blank">维基百科链接</a>
  

为什么之前的写法不对？ #

你尝试的<a v-bind:href="http://en.wikipedia.org/?title=obj.title" ...>里，整个属性值被当成了普通字符串，obj.title并没有被解析为Vue实例中的变量，而是被当作URL的一部分直接传递，浏览器会请求http://en.wikipedia.org/?title=obj.title这个字面量地址，自然无法正常工作。

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