<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</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> </script> </head> <body> <div id="box"> {{a | toDou}} </div> <script> Vue.filter('toDou',function(input){ return input<10?'0'+input:''+input; }); var vm=new Vue({ data:{ a:9 }, methods:{ } }).$mount('#box'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</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> </script> </head> <body> <div id="box"> {{a | toDou 1 2}} </div> <script> Vue.filter('toDou',function(input,a,b){ alert(a+','+b); return input<10?'0'+input:''+input; }); var vm=new Vue({ data:{ a:9 }, methods:{ } }).$mount('#box'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</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> </script> </head> <body> <div id="box"> {{a | date}} </div> <script> Vue.filter('date',function(input){ var oDate=new Date(input); return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); }); var vm=new Vue({ data:{ a:Date.now() }, methods:{ } }).$mount('#box'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</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> </script> </head> <body> <div id="box"> <input type="text" v-model="msg | fiterHtml"> <br> <div v-html="msg"> </div> </div> <script> //<h2>welcome</h2> Vue.filter('fiterHtml',function(input){ return input.replace(/<[^<]+>/g,''); }); var vm=new Vue({ data:{ msg:'<strong>welcome</strong>' }, methods:{ } }).$mount('#box'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</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> //<h2>welcome</h2> Vue.filter('filterHtml',{ read:function(input){ //数据-视图页面 alert(1); return input.replace(/<[^<]+>/g,''); }, write:function(val){ //视图页面 -> 数据 console.log(val); return val; } }); window.onload=function(){ var vm=new Vue({ data:{ msg:'<strong>welcome</strong>' } }).$mount('#box'); }; </script> </head> <body> <div id="box"> <input type="text" v-model="msg | filterHtml"> <br> {{{msg}}} </div> </body> </html>