Question

假设我有一个像这样的JS函数：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description">
    <title>Demo Project</title>
  </head>
  <body>
    <div id="appContainer"></div>
      <script  type="text/javascript" src="/public/assets/js/bundle.js"></script>
  </body>
</html>

现在，如果输出为true，我想显示一个元素：

function myFunc()
{
   return true;
}

我知道我可以在Vue <p v-if="myFun()">I am Test</p>内写这个myFunc方法，但我不希望这样。

任何想法都会非常感激。

Answer 1

您可以通过多种方式指向您的功能。其中之一：

＆＃13;

var myFunc = function(){
	return true;
}

new Vue({
  el: '#app',
  methods : {
    yourFunc() {
      return myFunc();
    }
  }
});

＆＃13;

<div id="app">
  <p v-if="yourFunc">test</p>
</div>

＆＃13;

https://jsfiddle.net/1nnav731/

Answer 2

您可以在方法部分链接您的vanilla函数 methods:{ myFun: myFun}

或编写自己的指令：

Vue.directive('visible', function (el, binding) {
    el.style.visibility = binding.value ? 'visible' : 'hidden';
});

如何在Vue指令中使用JavaScript函数？

2 个答案: