VUE过滤器

过滤器:让要显示在页面上的内容重新筛选。

主要分为全局过滤器和局部过滤器。
全局过滤器如下:

       <div id="itany">
            <p>{{8|addZero}}</p>
        </div>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            Vue.filter('addZero',function(data){
                if(data<10){
                    return '0'+data;
                }else{
                    return data;
                }
            })
                new Vue({
                el:'#itany'
            })
        </script>

局部过滤器如下:

       <div id="itany">
            <p>{{123.456|number}}</p>
        </div>
        
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#itany',
                filters:{
                   number:function(data){
                     return data.toFixed(2)
                   }
                }
            })
        </script>

过滤器中获取日期:

<div id="itany">
            <p>{{new Date|dat}}</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#itany',
                filters:{
                    dat:function(data){
                        return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'号'
+','+'星期'+data.getDay()+','+data.getHours()+'时'+data.getMinutes()+'分'+data.getSeconds()+'秒'
                    }
                }
            })
        </script>

计算属性:

      <div id="itany">
          <h1>{{count}}</h1>
      </div>
      <script src="js/vue.js"></script>
      <script type="text/javascript">
          new Vue({
              el:'#itany',
              data:{
                  mes:'hello vue'
              },
              computed:{
                  count:function(){
                      return this.mes.split(' ').reverse().join('===')
                  }
              }
          })
      </script>

计算总价练习:

      <div id="itany">
           <button v-on:click="add">加货</button>
           <h1>现总价为:{{counts}}</h1>
       </div>
       
       
       <script src="js/vue.js"></script>
       <script>
           new Vue({
               el:'#itany',
               data:{
                   arr1:{pice:2,count:3},
                   arr2:{pice:4,count:6},
                   arr3:{}
               },
               computed:{
                   counts:function(data){
                       return this.arr1.pice*this.arr1.count+this.arr2.pice*this.arr2.count
                   }
               },
               methods:{
                   add:function(){
                       this.arr1.count++;
                   }
                   
               }
           })
       </script>

数组API:
splice();把数组转换为字符串。
join();拼接,最后拼接为字符串。
concat();拼接,结果为拼接。
slice();截取,含头不含尾。
splice();删除,插入,替换。
reverse();翻转。
push();给数组末尾添加元素。
pop();删除数组末尾元素。
unshift();给数组开头添加元素。
shift();删除数组开头元素。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 4,871评论 0 1
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 1,197评论 1 4
  • 此笔记关于filter的官方文档的一些讲解及个人的一些拓展 简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这...
    chenjieyi阅读 174,006评论 21 62
  • 我爱上一个男人,一个永远不可能和我有结果的男人,他叫自己轴程。他和他的初恋女友历经种种磨难现在终于有机会在一起了,...
    毛童鞋阅读 271评论 0 0
  • 我家的群里,姑姑这些日子在听蒋勋讲红楼,嫂嫂也响应,蛮热衷。 我偶点开听,好象就一中学语文老师上课,还有点啰嗦,节...
    自在的絮叨阅读 354评论 0 2