Vue实现自带的过滤器实例

2024-05-06 15:09:59

字体：大中小

来源：转载

供稿：网友

一过滤器写法

{{ 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

功能:输出金钱以及小数点

参数:

第一个参数 {String} [货币符号] - 默认值: '$'

第二个参数 {Number} [小数位] - 默认值: 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>

上一篇：基于jQuery实现一个marquee无缝滚动的插件

下一篇：Vue中fragment.js使用方法详解

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注