Как использовать функции JavaScript в директивах Vue?

Question

1

Предположим, что у меня есть JS-функция:

function myFunc()
{
   return true;
}

Теперь я хочу показать элемент, если вывод is true:

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

Я знаю, что могу написать этот метод myFunc внутри methods Vue, но я не хочу этого.

Любая идея была бы очень оценена.

Hamed Kamrava 01 авг. 2017, в 07:26

Теги:

vue.js

vuejs2

2 ответа

Emīls Gulbis · Answer 1 · 2017-08-01T02-20-00.000Z

Вы можете указать на свою функцию разными способами. Один из них:

var myFunc = function(){
	return true;
}

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

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

Этого может быть недостаточно, потому что если вы используете вычисляемое свойство, результат кэшируется на основе его зависимостей и будет переоцениваться только при изменении некоторых его зависимостей.

Reiner · Answer 2 · 2017-08-01T03-15-00.000Z

Вы можете связать свою функцию ванили в методах раздела methods:{ myFun: myFun}

или написать свою собственную директиву:

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