vue第三次总结

过滤器：让要在显示页面上的内容重新进行筛选

1.局部过滤器

如下：

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

2.全局过滤器

如下：

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

3.计时练习

效果如下：

<h1></h1>
<script>
    var date=new Date();
    console.log(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();
    console.log(sec)
    
   document.querySelector('h1').innerHTML='现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒'; 
</script>

4.计算属性

添加求和的练习

效果如下：

<div id='itany'>
     <button @click='add'>加货</button>
      <h1>{{total}}</h1>
  </div>
   <script src='js/vue.js'></script> 
   <script>
    
       new Vue({
           el:'#itany',
           data:{
               package1:{price:2,count:3},
               package2:{price:4,count:6}
           },
           computed:{
               total:function(){
                   return this.package1.price*this.package1.count+this.package2.price*this.package2.count
               }
           },
           methods:{
               add:function(){
                   this.package1.count++;
               }
           }
           
       })
    </script>