vue.js - 在条件上添加vue指令

是否可以在条件上设置指令？

我有一个“粘性”指令，可以使元素在屏幕上保持粘性。
我在使用社交分享组件时

<tempalte>
    <div class="social-share" v-sticky>
        ....
    </div>
</template>

但是，现在我需要一个条件。我很想在 Prop 上做这个。

<social-share :is-sticky="true">

有没有简单的方法来添加指令？

我试图用v-bind /绑定(bind)它:

<div class="social-share" :v-sticky="isSticky">

但这最终将在标签中呈现“v-sticky”。

最佳答案

当没有值传递给指令时，您可以考虑默认为true。

bind(el, binding) {
    if ((! binding.hasOwnProperty('value')) || binding.value) {
        // The user wants the directive to be applied...
    }
}

在您的模板中:

<template>
    <social-share v-sticky> <!-- Will apply the directive -->
    <social-share v-sticky="true"> <!-- Will apply the directive -->
    <social-share v-sticky="false"> <!-- Will NOT apply the directive -->
</template>

关于vue.js - 在条件上添加vue指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37526888/