2018-09-15

1. 个位数前加零

<div id="idelt"><p>{{1|jialing}}</p></div>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.filter('jialing',function(data){
                if(data<10){
                    return '0'+data
                }else{
                    return data
                }
            })
            new Vue({el:'#idelt'})
        </script>

2. 保留小数（四舍五入）

<div id="idelt"><p>{{6.329|del}}</p><p>{{6.999|da}}</p></div>
(一)
<script type="text/javascript">
            Vue.filter('da',function(data){
                return data.toFixed(2)
            })
            new Vue({
                el:'#idelt',
            })
        </script>
（二）
<script type="text/javascript">
            new Vue({
                el:'#idelt',
                filters:{
                    del:function(data){
                        return data.toFixed(2)
                    }
                }
            })
        </script>

3. 日期、时间

        <div id="idelt"><p>{{new Date()|sj}}</p></div>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.filter('sj',function(dat){
                
                 return dat.getFullYear()+'年'+dat.getMonth()+'月'+dat.getDate()+'日 星期'+dat.getDay()+', '+dat.getHours()+'点'+dat.getMinutes()+'分'+dat.getSeconds()+'秒';   
                 
                 setInterval(sj,1000); 
                 
            })
            new Vue({el:'#idelt'})
        </script>

4. 计算属性

（一）
   <div id='itany'>
      <h1>{{see}}</h1>
      park1:
      <input type="button" id="" value="加货"  @click="jia"/>
      <br />
      park2:
      <input type="button" id="" value="加货"  @click="jia1"/>
   </div>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
            park1:{price:20,count:3},
            park2:{price:10,count:4},
           },
         computed:{
             see:function(){
                   return this.park1.price*this.park1.count+this.park2.price*this.park2.count
               }
         },
         methods:{
            jia:function(){
                this.park1.count++
            },
            jia1:function(){
                this.park2.count++
            }
         }
       })
    </script>

（二）

   <div id='itany'>
       <h1>{{msg.split(' ').reverse().join('===')}}</h1>
       <a href="#">{{count}}</a>
   </div>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
       new Vue({
           el:'#itany',
           data:{
               msg:'hello vue'
           },
           computed:{//计算属性
               count:function(){
                   return this.msg.split(' ').reverse().join('===')
               }
           }
       })
    </script>