Question

我想从Vue.js v-bind属性中调用一个纯JavaScript函数。我可以通过Vue.js数据变量引导它，但直接从v-bind调用一个普通的JavaScript函数会产生错误。

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

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

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="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实例的一部分，反过来也无法访问。

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

关于使用全局函数的this post from the vue author(Evan You)：

因为隐含地回归全局，将成为可维护性的噩梦。当您查看模板时，您将不知道变量是属于该组件，还是某些由您不知道在哪里定义的全局变量。

值得注意的是，如果您认为这是您想要做的事情，那么您可以使用全局混音并指定一些方法来获取Urls。

有办法做到这一点，但我不推荐它：

请参阅this fiddle

基本上，你将自己的函数添加到Vue.prototype（这就像Vue Router和Vuex这样的工作方式）：

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

确保在创建var vm = new Vue()电话之前将其声明为。

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

如何从Vue.js v-bind

1 个答案: