vue03

过滤器

<div class="le">

<p>{{12.13456|number}}</p>

</div>

new Vue({

el:".le",

filters: {

//保留2位小数点过滤器 不四舍五入

number(value) {

var toFixedNum = Number(value).toFixed(3);

var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);

return realVal;

}

},

})

年月日

<div id="itany">

<p>{{new Date()|date}}</p>

</div>

Vue.filter('date',function(data){

return data.getFullYear()+'年'+data.getMonth()+'月'+data.getDate()+"日,星期"+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'

})

new Vue({

el:"#itany"

})

vue实例的属性

<div id="itany">

{{msg}}

<h1 ref="hello">你好</h1>

</div>

var vm=new Vue({

el:"#itany",

data:{

msg:"hello vue"

},

uname:"rose",

age:18

})

//    $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);

//        refs

console.log(vm.$refs);

console.log(vm.$refs.hello);

计算属性

<div id="itany">

<h1>{{msg}}</h1>

<a href="#">{{revMsg}}</a>

</div>

new Vue({

el:"#itany",

data:{

msg:'hello vue'

},

computed:{

revMsg:function(){

return this.msg.split('').reverse().join('===')

}

}

})