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('===')
}
}
})
