環形進度條
阿新 • • 發佈:2021-09-22
1、使用Vue.filter()進行全域性定義
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.14.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> <p>{{price|rmb(3)}}</p> <p>{{price|rmb(2)|money}}</p> </div> <script> const vm = new Vue({ el:"#app", data(){ return { price: 1180330.65322 } }, methods:{ } }) </script> </body> </html>
2、在vue物件中通過filters屬性來定義
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.14.js"></script> </head> <body> <div id="app"> <p>{{price|rmb(3)}}</p> <p>{{price|rmb(2)|money}}</p> </div> <script> const vm = new Vue({ el:"#app", data(){ return { price: 1180330.65322 } }, methods:{ }, filters:{ // 區域性過濾器, 只能在當前vm物件的控制範圍內使用 rmb(data,len=2){ return parseFloat(data.toFixed(len)); }, money(data){ return data.toLocaleString(); } } }) </script> </body> </html>