自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('red',function(){ this.el.style.background='red'; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> </div> </body> </html>
2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('a-red',function(){ this.el.style.background='red'; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); }; </script> </head> <body> <div id="box"> <span a-red> asdfasd </span> </div> </body> </html>
3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('red',function(){ this.el.style.background='red'; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> <span v-red> asdfasd </span> <span v-red> asdfasd </span> </div> </body> </html>
4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('red',function(color){ this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ a:'blue' } }); }; </script> </head> <body> <div id="box"> <span v-red="a"> asdfasd </span> </div> </body> </html>
5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('red',function(color){ this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:'#box' }); }; </script> </head> <body> <div id="box"> <span v-red="'blue'"> asdfasd </span> </div> </body> </html>
6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive('red',{ bind:function(){ this.el.style.background='red'; } }); window.onload=function(){ var vm=new Vue({ el:'#box' }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> </div> </body> </html>
