<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>自定义指令</title> <script src="./vue-v2.6.10.js"></script> </head> <body> <div id="app"> <p v-red>123</p> <div v-red>4343455</div> </div> </body> <script> // 全局自定义指令 // Vue.directive(‘red‘,{ // inserted:function(el){ // el.style.background = ‘red‘; // } // }) var app = new Vue({ el:‘#app‘, data:{ }, // 局部自定义指令 directives:{ red:{ inserted:function(el){ el.style.color = ‘green‘; } } } }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue-v2.6.10.js"></script> </head> <body> <div id="app"> <p v-color="msg">123</p> <!-- <input type="text" v-model="msg"> --> </div> </body> <script> // 全局自定义指令 // Vue.directive(‘red‘,{ // inserted:function(el){ // el.style.background = ‘red‘; // } // }) // 自定义指令的值需要现有数据才能使用 var app = new Vue({ el:‘#app‘, data:{ msg:‘red‘ }, // 局部自定义指令 directives:{ color:{ inserted:function(el,data){ el.style.color = data.value; // console.log(data); } } } }); </script> </html>
原文：https://www.cnblogs.com/dazahui/p/14546814.html