Vue指示文でJavaScript関数を使用するには？

Question

は、私はこのようなJSの機能を持っていると仮定します

function myFunc() 
{ 
    return true; 
} 

さて、私はの出力が真である場合、要素を表示する：

<p v-if="myFun()">I am Test</p> 

私はVueの内部でこのmyFuncメソッドを書くことができます知っていますmethodsしかし、私はこれを望んでいません。

いずれかのアイデアをいただければ幸いです。

Answer 1

あなたは方法のセクション methods:{ myFun: myFun}

であなたのバニラ機能をリンクしたり、独自のディレクティブを書くことができます。

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

Answer 2

あなたは多くの方法であなたの関数を指すことができます。これらのいずれか：

var myFunc = function(){ 
 
\t return true; 
 
} 
 

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

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

https://jsfiddle.net/1nnav731/