如何从 Vue.js v-bind 调用 JavaScript 函数

Question

我想从 Vue.js 属性内部调用纯 JavaScript 函数v-bind。我可以通过 Vue.js 数据变量传递它来完成此操作，但直接调用纯 JavaScript 函数会v-bind产生错误。

http://jsfiddle.net/edwardtanguay/2st0fruh

如何直接调用 JavaScript 函数，而无需映射到 Vue.js 中的变量或方法？

超文本标记语言

<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="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()
    }
});

Answer 1

为了使 Vue 能够绑定自身，它需要成为 Vue 实例的一部分。虽然您的函数在正常情况下可能可以访问，但它不是 vue 实例的一部分，因此无法访问。

正如您已经说过的，使用dataprop 将其移动到 vue 实例的范围内。您还可以使用computed如果值可能会发生变化，

根据vue 作者（Evan You）关于使用全局函数的这篇文章：

因为隐式回退到全局将是可维护性的噩梦。当您查看模板时，您将不知道某个变量是否属于该组件，或者是否属于某个您不知道在哪里的人定义的某些全局变量。

值得注意的是，如果您觉得这是您想做的很多事情，您可以有一个全局 mixin 并在其中指定一些方法来获取 URL。

有一种方法可以做到这一点，但我不推荐它：

看看这个小提琴

基本上，您可以将自己的函数添加到Vue.prototype（这就是 Vue Router 和 Vuex 之类的工作原理）：

Vue.prototype.$myFunc = function getUrl() {
    return 'http://www.amazon.com';
}

确保在创建之前声明它var vm = new Vue()声明它。

$myFunc()然后你可以通过模板或this.$myFunc()vue 实例本身访问它。