Vue 自定义指令-带参数

最新推荐文章于 2024-06-28 11:34:03 发布

Seric.

最新推荐文章于 2024-06-28 11:34:03 发布

阅读量1.3k

点赞数 2

分类专栏： Vue 自定义指令 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Seric_xiao/article/details/120442019

版权

本文介绍如何在Vue中创建带参数的自定义指令，以改变元素背景色为例，详细阐述定义及使用过程。通过`bind`钩子函数实现元素的初始化操作，动态获取并应用传入参数的属性值。

摘要由CSDN通过智能技术生成

带参数的自定义指令创建的语法（改变元素背景色）

Vue.directive('color',{
    inserted:function(el,binding){
        //binding表示传递过来的参数
        el.style.backgroundColor=binding.value.color;
    }
})

指令的用法

<input type="text" v-color='{color:"orange"}' />

下面，看一下完整的代码案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令带参数</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-color="msg" />
    </div>
    <script src="vue.js"></script>
    <script>
      //自定义指令