📌  相关文章
📜  VueJS-指令

📅  最后修改于: 2020-10-17 05:03:30             🧑  作者: Mango

指令是VueJS以某种方式执行操作的指令。我们已经看到了诸如v-if，v-show，v-else，v-for，v-bind，v-model，v-on等指令。

在本章中，我们将介绍自定义指令。我们将创建与组件操作类似的全局指令。

句法

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

我们需要使用Vue.directive创建指令。它采用指令名称，如上所示。让我们考虑一个示例，以显示指令工作的详细信息。

例

VueJs Instance
      
   
   
      

         
VueJS Directive

在此示例中，我们创建了一个自定义指令changestyle ，如以下代码所示。

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

我们将以下changestyle分配给div。

VueJS Directive

如果我们在浏览器中看到，它将以红色显示文本VueJs指令，并且字体大小增加到30px。

输出

字体大小

我们使用了bind方法，它是指令的一部分。它带有三个参数e1 ，这是自定义指令需要应用到的元素。绑定就像传递给自定义指令的参数一样，例如v-changestyle =“ {color：’green’}”，其中绑定参数将读取绿色，而vnode是元素，即节点名。

在下一个示例中，我们控制了所有参数，并显示了每个参数提供的详细信息。

以下是一个将值传递给custom指令的示例。

VueJs Instance
      
   
   
      

         
VueJS Directive

输出

颜色变化

文本的颜色更改为绿色。该值使用以下代码传递。

VueJS Directive

And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

筛选器

VueJS支持有助于文本格式设置的过滤器。它与v绑定和插值（{{}}）一起使用。我们需要在JavaScript表达式的末尾使用管道符号来进行过滤。

例

VueJs Instance
      
   
   
      

         

         Letter count is : {{name | countletters}}

在上面的示例中，我们创建了一个简单的过滤器计数字母。 “计数”过滤器对在文本框中输入的字符数进行计数。要使用过滤器，我们需要使用filter属性，并通过以下代码定义所使用的过滤器。

filters : {
   countletters : function(value) {
      return value.length;
   }
}

我们正在定义方法计数字母，并返回输入的字符串的长度。

要在显示中使用过滤器，我们使用了管道运算符和过滤器的名称，即countletters 。

Letter count is : {{name | countletters}}

以下是浏览器中的显示。

CountLetter

我们还可以使用以下代码将参数传递给过滤器。

Letter count is : {{name | countletters('a1', 'a2')}}

现在， countletters将具有三个参数，即message，a1和a2 。

我们还可以使用以下代码将多个过滤器传递给插值。

Letter count is : {{name | countlettersA, countlettersB}}

在过滤器属性中， countlettersA和countlettersB将是这两种方法， countlettersA会将详细信息传递给countlettersB 。