2018-09-14vue.js filter过滤器、保留两位小

一、filter过滤器

过滤器：把要显示在页面上的数据进行筛选或重新操作，分为全局过滤和局部过滤
body部分：

<div id="itany">
     <p>{{6|addZero}}</p>
  </div>

js部分：

<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",
        data:{},
        methods:{},
        filters:{
            addZero:function(data){
                if(data<10){
                    return '0'+data
                }else{
                    return data
                }
            }
        }
    })
</script>

二、保留两位小数练习
body部分：

  <div id="itany">
       <p>{{78.467|number}}</p>
 </div>

js部分：

 <script src="js/vue.js"></script>
<script>
    //全局过滤
    //Vue.filter('number',function(data){
          // return data.toFixed(2)
    //})
    new Vue({
        el:"#itany",
       // 局部过滤
        filters:{
            number:function(data){
                return data.toFixed(2)
            }
        }
        
    })
</script>

效果图：

保留两位小数.png

三、日期时间过滤练习
body部分：

     <div id="itany">
         <p>{{new Date()|time}}</p>
   </div>

js部分：

<script src="js/vue.js"></script>
<script>
    //全局过滤
//Vue.filter('time',function(data){
  //return data.getFullYear()+'年'+data.getMonth()+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'
 // })
  var vm=  new Vue({
        el:'#itany',
//  data:{
// num:new Date(),
 //mon:new Date().getMonth()+1
   // },
 // 局部过滤
        filters:{
            time:function(data){
                       //  var mon=new Date().getMonth()+1
                
           //  return data.getFullYear()+'年'+mon+'月'+data.getDate()+'日,星
             期'+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'
            +data.getSeconds()+'秒'
                return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'
            }
        }
    })
</script>

四、vue.js实例的属性
（1） data 获取vue实例中的数据
（3） refs 获取所有带ref属性的元素
案例：
body部分：

<div id="itany">
     {{msg}}
   <h1 ref="box">你好</h1>

  </div>

js部分：

<script src="./js/vue.js"></script>
<script>
     var vm=new Vue({
        el:"#itany",
        data:{
           msg:'hello vue' 
        },
        uname:'jack',
        age:18,
        sex:'男'
    })
//  $el
    console.log(vm.$el);
   vm.$el.style.color='red';
//   $data
    console.log(vm.$data);
 // $options
    console.log(vm.$options);
    console.log(vm.$options.uname);
    console.log(vm.$options.age);
    console.log(vm.$options.sex);
   //  $refs
    console.log(vm.$refs);
    console.log(vm.$refs.box);
 </script>

五、vue.js的计算属性
body部分：

 <div id="itany">
      <h3>{{msg}}</h3>
      <a href="#">{{revemg}}</a>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            msg:'hello vue'//vue===hello
        },
        computed:{
            revemg:function(){
                return this.msg.split(' ').reverse().join("===")
            }
        }
    })
</script>

效果图：

计算属性.png