一.过滤器

过滤器分为局部过滤器和全局过滤器

1.局部过滤器

格式

<div class='glq'>
      <p>{{变量|过滤器名字}}</p>      （变量和过滤器名字都是由自己定）
</div>
<script src='js链接'></script>
<script>
      Vue filter('过滤器名字'，function(data){
            在这里要用return索引返回值
      });
      new Vue({
            el:'glq'
      })
</script>

2.全局过滤器

格式

<div class='glq'>
      <p>{{变量|过滤器名字}}</p>
</div>
<script src='js链接'></script>
<script>
      new Vue({
            el:'glq',
            filters:{
                  变量:function(data){
                        在这里要用return索引返回值
                  }
            }
      })
</script>

练习

1.当数字为小于10的一位数时，在前面加个 “0”

<div class='glq'>
      <p>{{5|fun}}</p>
</div>
<script src='js链接'></script>

1）局部过滤

<script>
      el:'glq',
      Vue.filter(‘fun’,function(data){
            if(data<10){
                  return '0'+data
            }else{
                  return data
            }
      }
      new Vue({
            el:'.glq',
      })
</script>

2）全局过滤

<script>
      new Vue({
            el:'.glq',
            filters:{
                  fun:function(data){
                        if(data<10){
                              return '0'+data
                        }else{
                              return data
                        }
                  }
            }
      })
</script>

2.小数点后留两位数

<div class='glq'>
      <p>{{1.234|fun}}</p>
</div>
<script src='js链接'></script>

局部过滤

<script>
      el:'.glq',
      Vue.filter('fun',function(data){
            return data.toFixed(2)
      })
</script>

全局过滤

<script>
      el:'.glq',
      filters:{
            fun:function(data){
                  return data.toFixed(2)
            }
      }
</script>

3.时间

<div class='glq'>
      <p>{{new Date()|fun}}</p>
</div>
<script src='js链接'></script>

局部过滤

<script>
      el:'.glq',
      Vue.filter('fun',function(data){
            var date=new Date();
            var year=date.getFullYear();
            var mon=date.getMonth()+1;
            var tian=date.getDate();
            var day=date.getDay();
            var hours=date.getHours();
            var min=date.getMinutes();
            var sec=date.getSeconds();
            return '现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒'
      })
</script>

全局过滤

<script>
      el:'.glq',
      filters:{
            fun:function(data){
                  var date=new Date();
                  var year=date.getFullYear();
                  var mon=date.getMonth()+1;
                  var tian=date.getDate();
                  var day=date.getDay();
                  var hours=date.getHours();
                  var min=date.getMinutes();
                  var sec=date.getSeconds();
                  return '现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒'
            }
      }
</script>

二.计算属性

通过使用与data，methods同级的computed完成一些重复繁琐的计算

例如：将Hello Vue转化成 Vue===Hello

<div class='nr'>
      {{fun}}
</div>
<script src='js链接'></script>
<script>
      new Vue({
            el:'.nr',
            data:{
                  msg:'Hello Vue'
            }
            computed:{
                  fun:function(){
                        return this.msg.split(' ').reverse().join('===');
          (split是切割的意思，引号中间的空格表示，每个空格为一个切割单位)
         （reverse是反转的意思，就是将切割开的元素顺序颠倒）
         （jion是连接的意思，引号中间的符号是在切割开的地方要添加的元素）
                  }
            }
      })
</script>

练习题：求和

<div class='nr'>
      <button v-on:click="jia">加货</button>
      <p>{{fun}}</p>
</div>
<script src='js链接'></script>
<script>
      new Vue({
            el:'.nr',
            data:{
                  arr:{price:2,count:3},
                  add:{price:4,count:6}
            },
            computed:{              (求和)
                  fun:function(){
                        return this.arr.price*this.arr.count+this.add.price*this.add.count
                  }
            }
            methods:{                 （arr.count每加一个的和）
                  jia:function(){
                        this.arr.count++
                  }
            }
      })
</script>