一 過濾器寫法
{{ message | Filter}}二 Vue自帶的過濾器:capitalize
功能:首字母大寫
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue自帶的過濾器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | capitalize}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message: "abc" } }) </script> </body></html>上面代碼輸出:Abc
三 Vue自帶的過濾器:uppercase
功能:全部大寫
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue自帶的過濾器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | uppercase}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message: "abc" } }) </script> </body></html>上面代碼輸出:ABC
四 Vue自帶的過濾器:uppercase
功能:全部小寫
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue自帶的過濾器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | lowercase}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message: "ABC" } }) </script> </body></html>上面代碼輸出:abc
五 Vue自帶的過濾器:currency
功能:輸出金錢以及小數(shù)點(diǎn)
參數(shù):
第一個參數(shù) {String} [貨幣符號] - 默認(rèn)值: '$'
第二個參數(shù) {Number} [小數(shù)位] - 默認(rèn)值: 2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue自帶的過濾器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | currency}} <!--輸出$123.47--> {{message | currency '¥' "1"}} <!--輸出$123.5--> </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { message: "123.4673" } }) </script> </body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
