Question

我想在条件下将指令放入 Vue组件。我已经安装了名为“ mask ”的程序包，并且希望将 v-mask指令置于条件中。在某些情况下，组件没有称为“掩码”的属性，但在某些情况下具有。所以当我没有通过面具我的组件时，我得到这个错误这是我在：p中使用v-mask指令的组件

<input v-mask="mask" />

如果通过mask属性，有什么方法可以插入v-mask；如果mask为空，我不能插入v-mask吗？？

Answer 1

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

考虑您的用例：

<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，则继续执行实际指令。

Answer 2

您可以在此处使用计算项；

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

在使用IsMaskEmpty函数计算布尔结果之后，您可以在这种情况下根据需要创建DOM元素。

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

Answer 3

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

将Vue指令置于条件上

3 个答案: