如何在Vue.js的v-bind属性中直接调用原生JavaScript函数？

我来帮你搞定这个问题～ 你遇到的报错是因为Vue模板的表达式只能访问当前Vue实例作用域内的属性和方法，全局的原生JS函数默认不在这个作用域里，所以直接写getUrl()会找不到函数。

不过不用中转到Vue的data变量或methods方法，你可以通过以下方式直接调用原生全局函数：

方法：通过window对象访问全局函数 #

在浏览器环境中，全局定义的函数会自动挂载到window对象上。所以你只需要在模板里通过window来调用这个函数就行，修改对应的<a>标签代码如下：

<div>
  <a target="_blank" v-bind:href="window.getUrl()">goto URL2 using javascript function</a>
</div>

修改后的完整代码 #

HTML部分：

<div id="app">
  <div> The URL is: {{url}} </div>
  <div>
    <a target="_blank" v-bind:href="url">goto URL</a>
  </div>
  <div>
    <a target="_blank" v-bind:href="url2">goto URL2</a>
  </div>
  <div>
    <a target="_blank" v-bind:href="window.getUrl()">goto URL2 using javascript function</a>
  </div>
</div>

JavaScript部分：

function getUrl() {
  return 'http://www.amazon.com';
}
var vm = new Vue({
  el: '#app',
  data: {
    url: 'http://www.google.com',
    url2: getUrl()
  }
});

这样修改后，就能直接在v-bind中调用原生的getUrl()函数，无需额外映射到Vue的变量或方法了。

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