vue--过滤器

作者: 嘬烟盒的程序员 | 来源:发表于2016-11-29 23:51 被阅读0次

vue--过滤器
Vue-- 监听路由变化，数据无法更新？
vue-深拷贝,深克隆,deepclone最佳方案
vue-将HTML字符串格式化,html2string
vue
vue--路由
VUE过滤器和计算属性
自定义过滤器的封装
vue的过滤器及计算属性
2018-09-18 vue初学六(过滤器:filter(fil

//货币
{{数据 | 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>

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