带参数的自定义指令创建的语法(改变元素背景色)
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> //自定义指令