vue--过滤器

//货币
{{数据 | currency}}
//转 大写
{{数据 | uppercase}}
//转小写
{{数据 | lowercase}}
……
还有好多,不一一列出,先写一个简单的例子,参考一下

<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
                    new Vue({
                                 el:'.box',
                                         data:{
                                                   d:12,
                                                    str:'HELLO',
                                                    str2:'hello'
                                                }
                              });
};
</script>
<body>
<div class="box">
            <input type="text" v-model="d" />

            <input type="text" v-model="d" />
               <p>{{d | currency }}</p>
              <p>{{d | currency '¥' 0}}</p>
              <p>{{str | lowercase}}</p>
              <p>{{str2 | uppercase | lowercase}}</p>

</div>
</body>

多个过滤器:

    {{str2 | uppercase | lowercase}}

自定义过滤器

        <script>
          window.onload=function(){
          Vue.filter('reverse',function(input,a,b){
                        alert(a+b);
            return input.split(' ').reverse().join(' ');
              });
            new Vue({
                                el:'#box',
                                data:{
                                data:'hello Vue'
                                }
                          });
        };
          </script>
              <body>
               <div id="box">
              <p>{{data | reverse 'aa' 'bb'}}</p>
              </div>
</body>

—————————————————————————————————

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 4,943评论 0 1
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 1,244评论 1 4
  • 目的:处理同一种数据1、基本过滤:小写 {{str|lowercase}} 大写 {{str|uppercase}...
    紫由袅阅读 522评论 0 0
  • 过滤器是个啥? 使用vue的时候,绑定数据时超级方便的,只需要 {{message}}这样既可,但是有时候我们也有...
    小枫学幽默阅读 1,916评论 1 6
  • 干啥的? 比如一个大写的过滤器{{message|uppercase}} message是待处理的信息,然后一个竖...
    鸭梨山大哎阅读 294评论 0 1

友情链接更多精彩内容