2018-09-17

vue计算属性
html代码：

<div class="itany">
<p>{{msg}}</p>
<a href="#">{{erm}}</a>
</div>
js:

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

vue 属性
html：

<div class="itany">
{{mas}}
<h1 ref="vue">hello</h1>
</div>
js：

   <script src="vue.js"></script>
    <script>
         var v=new Vue({
              el:'.itany',
              data:{
               mas:"你好"
               },
             uname:'jack',
             age:18
           }) 

 //    $el  获取vue绑定的元素的
       console.log(v.$el);
      v.$el.style.color="red";

    //   $data 获取vue实例中的数据
      console.log(v.$data);

    //   $options  获取vue实例中的自定义属性
    console.log(v.$options);
    console.log(v.$options.uname);
    console.log(v.$options.age);

    //    $refs     获取所有带ref属性的元素
     console.log(v.$refs.vue);
</script>

filter过滤 保留俩位小数

html：

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

js：

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

用过滤器获取时间

html：

<div class="itany">
       <p>{{new Date()|zero}}</p>
 </div>

js：

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

    new Vue({
      el:'.itany',
      filters:{
      zero:function(data){
          return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日'+'星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'
                }
      }
})

</script>