如何在条件下使用 vuejs 指令？

Question

我在我的项目中起诉 https://github.com/DominikSerafin/vuebar 指令。现在取决于一些变量，我想在 html 中使用它或不使用它。

像这样

<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>

总结一下：

<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code

有什么方法可以让我说出类似的话：

<div some_var ? v-bar:''></div>

或者让我的指令继承 v-bar 并呈现？

Answer 1

不，无法在某些条件下应用指令。但是您可以尝试以编程方式创建和销毁自定义滚动条，来自文档：

Public methods.

You can access them from your component context: this.$vuebar. Alternatively you can access them from your main Vue instance: Vue.vuebar. Every method needs to have passed Vuebar scroll container element as the first argument. You can do that easily using $refs.
initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)

Answer 2

其实你可以做一件事。使用指令挂钩参数。

您可以将基于钩子参数的条件放入指令代码中。你可以确保那些钩子参数是反应性的，这样它就可以在你想要的时候改变。

根据绑定值，在指令代码中写下是否为指令做某事的逻辑。

阅读this，有不明白的地方欢迎评论

如何在条件下使用 vuejs 指令？

How to use vuejs directive on condition?

vue.js

vuejs2

vue-directives