2018-09-19过滤器

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>

小数点后留两位

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

输出时间

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

计算属性
翻转

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