Example of custom instruction with parameters in Vue

text

For custom commands, please refer to the official documentation:/guide/custo…

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Custom commands with parameters&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div &gt;
      &lt;input type="text" v-color="msg" /&gt;
    &lt;/div&gt;
    &lt;script src=""&gt;&lt;/script&gt;
    &lt;script&gt;
      //Custom command-with parameters      ("color", {
        bind: function (el, binding) {
           = ;
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: {
            color: "blue",
          },
        },
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Through the above code, you can see that the instruction defining a color is passed on the msg object when used.

So this object will give the binding parameter. We use the value attribute of this parameter to get the value of the color attribute in the msg object, and then use it to set the background color of the text box.

This is used here. The hook function bind is called only once. The first time the binding instruction is called when the element is bound, we can bind this to an initialization action that only executes once.

The above is a detailed explanation of the example of Vue implementing custom instructions with parameters. For more information about Vue custom instructions with parameters, please pay attention to my other related articles!