2018-09-18过滤器，计算属性，获取日期时间

{{}}叫做模板，不在其中写入太多的逻辑操作，为了方便后期维护

1.过滤器（对页面上的数据进行筛选和过滤）

（1）全局过滤器

html
<p>{{num|过滤器的名字}}</p>

js
Vue.filter("过滤器的名字",function(){})

（2）局部过滤器

html
<p>{{num|过滤器的名字}}</p>
new Vue({
el"选择器",
data:{},
methods:{},
filters:{
"过滤器的名字":function(){
}
}
})

列如

全局过滤器

<div id='app'>
    <h1>{{num|addZero}}</h1>
</div>

<script>

//全局过滤器

Vue.filter('addZero',function(data){
        if(data<10){
            return '0'+data;
         }else{
             return data;
         }
     })
new Vue({
  el:"#app"，
data:{
//               num: Math.floor(Math.random()*(max-min+1)+min)  随机数公式
             num: Math.floor(Math.random()*(20-0+1)+0)
         }
})

</script>

当小于10时会添加0，列如01,02,03,04；
当大于10时直接输出

局部过滤器

<div id='app'>
      <h1>{{num|addZero}}</h1>
  </div>

 new Vue({
           el:'#app',
           data:{
//               num: Math.floor(Math.random()*(max-min+1)+min)  随机数公式
               num: Math.floor(Math.random()*(20-0+1)+0)
           },
           filters:{
               addZero:function(data){
               if(data<10){
                  return '0'+data;
               }else{
                   return data;
               }
         }
           }
       })

当小于10时会添加0，列如01,02,03,04；
当大于10时直接输出

V@E0(529HHP8TV[E5T]G14O.png
0J3CRSH3R%HV}PY(~5R_5YN.png

保留两位小数，四舍五入

全局过滤器

<div id='app'>
        <p>{{123.456|number}}</p>
    </div>
<script>

    Vue.filter('number',function(data){
        return data.toFixed(2)
    })
    new Vue({
        el:'#app'，
    })

</script>

局部过滤器

<div id='app'>
        <p>{{123.456|number}}</p>
    </div>

<script src="js/vue.js"></script>
<script>


    new Vue({
        el:'#app',
        data:{

        },
        filters:{
            number:function(data){
                return data.toFixed(2)  //保留2位小数
            }
        }
    })

</script>

$M%69F2VW5S(J_O6P`0E`VD.png

<div id='app'>
       <h1>{{new Date()|date}}</h1>
   </div>

    <script src='js/vue.js'></script>

    <script>
        Vue.filter('date',function(date){
            return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+"日,星期"+date.getDay()+date.getHours()+'点'+date.getMinutes()+'分'+date.getSeconds()+'秒'
        })
        new Vue({
            el:'#app'
        })
    </script>

8NH%4F5~O2P$077DF0@UW(7.png

2.计算属性

(1)

<div id='app'>
      <a href="">{{revMsg}}</a>
   </div>

    <script src='js/vue.js'></script>

    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           methods:{},
           filters:{},
           computed:{
               revMsg:function(){
                   return this.msg.split(' ').reverse().join('&&&&&&&')
               }
           }
       })

    </script>

1.png

(2)

 <div id='app'>

      <button @click='add'>加货</button>
       <h1>{{total}}</h1>

   </div>

    <script src='js/vue.js'></script>

    <script>

       new Vue({
           el:'#app',
           data:{
               pack1:{price:5,count:3},
               pack2:{price:4,count:6}
           },
           computed:{
               total:function(){
                 return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
                  //求和并返回
               }
           },
           methods:{
               add:function(){
                   this.pack1.count++;
                  //使count加1，并重新放回数组pack1中重新计算，结果便是加后的值
               }
           }
       })

    </script>

2.png

3.js中时间设置

<script>
    var date=new Date();
    //年份
    var year=date.getFullYear();
    //月
    var mon=date.getMonth()+1;
    //日
    var ri=date.getDate();
    //星期
    var week=date.getDay();
    //时
    var hour=date.getHours();
    //分
    var min=date.getMinutes();
    //秒
    var sec=date.getSeconds();
    
    document.write(`今天是${year}年,${mon}月,${ri}日，星期${week}，${hour}点，${min}分，${sec}秒`)
</script>