vue14 自定义过滤器
生活随笔
收集整理的這篇文章主要介紹了
vue14 自定义过滤器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
?
總結
以上是生活随笔為你收集整理的vue14 自定义过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H2O —— 宣称性能是 Nginx 2
- 下一篇： vue2.0路由之编程式导航