在条件下设置Vue指令

Question

我想将指令放在条件上的Vue组件中。我已经安装了一个名为“掩码”的包，我想将v-掩码指令设置为条件。在某些情况下，组件没有称为“掩码”的属性，但在某些情况下却有。因此，当我不将掩码传递给我的组件时，我会得到这个错误--这是我使用v掩码指令的组件：

<input v-mask="mask" />

如果掩码属性传递，是否可以插入v-掩码，如果掩码为空？

Answer 1

<input v-mask="mask" v-if="mask.length">
<input v-else>

Answer 2

可以在绑定指令之前检查条件。

考虑一下您的用例：

<input v-mask="mask" />

您的指令将如下所示：

import { mask } from 'v-mask'

directives: {
    mask: {
      bind(el, binding, vnode, oldVnode) {

        // This is the condition
        if (binding.value) {
          mask(el, binding, vnode, oldVnode)
        }

      }
    },
},

bind()方法中的条件检查传递给指令的值是否存在，是否为true-ish。

如果是真-ish，则继续执行实际的指令。

Answer 3

您可以在这里使用计算项；

var vm = new Vue({
  el: '#example',
  data: {
    mask: 'maskdata'
  },
  computed: {
    IsMaskEmpty: function () {
      return this.mask === "";
    }
  }
})

使用IsMaskEmpty函数计算bool结果之后，可以根据需要创建DOM元素。

<input v-mask="mask" v-if="!IsMaskEmpty">
<input v-if="IsMaskEmpty">