Vue.js 自定义指令

Vue.js 指令在 Vue.js 应用程序中使用，以使其可重用且简单。指令就像是可以在 Vue.js 应用程序中以特定方式执行操作的指令。我们已经在 vue-js-conditions-and-loops 页面中使用过简单的条件指令，例如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等。

在这里，我们将学习如何创建自定义和全局指令，并像在 Vue.js 组件 vue-js-component 中一样使用它们，因为 Vue.js 允许我们创建自己的自定义指令。

语法

要创建自定义指令，我们必须使用 Vue.directive 和指令的名称，如上面的语法所示。让我们看一个例子来演示如何创建自定义指令以及如何使用它。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

示例说明

在上面的示例中，您可以看到我们创建了一个名为“changestyle”的自定义指令，如下所示

现在，自定义指令“changestyle”被分配给一个 div，如下所示

如何将值传递给自定义指令？

我们可以通过将值绑定到它们来将值传递给自定义指令。绑定就像传递给自定义指令的参数。

语法

让我们举个例子来演示如何将值传递给自定义指令。

Index.html

Index.js

程序执行后，您将看到以下输出

输出

您可以看到该值已在指令中传递，并且文本的颜色已更改为绿色。该值是通过使用以下代码传递的

它通过使用以下代码进行访问

将过滤器与自定义指令一起使用

Vue.js 支持可在文本格式化中使用的过滤器。过滤器通常与 v-bind 和插值 ({{}}) 一起使用。我们需要在 JavaScript 表达式的末尾使用管道符号来表示过滤器。

让我们看一个例子来演示在自定义指令中使用过滤器。

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

当您在上面的框中键入任何文本时，您可以获得如下所示的字母计数

示例说明

在上面的示例中，您可以看到我们创建了一个名为 “countletters” 的简单过滤器。countletters 过滤器计算在文本框中输入的字符数。我们必须使用过滤器属性并定义所使用的过滤器，如下所示

在这里，我们定义了方法 countletters，然后返回输入的字符串的长度。

现在，我们使用了管道运算符和过滤器 “countletters” 的名称来在输出中显示过滤器的结果