filter
全局过滤器
Vue.filter('addZero',function(data) {
return data < 10 ? '0' + data:data
})
<div>{{num | addZero}}</div>
局部过滤器
filters: {
numFilter(state,n,type) {
return type+state.tofixed(n);
}
}
<div>{{num | numFilter(2,'¥')}}</div>
格式化时间的过滤器
filters: {
timerFilter: (date) => {
var y = date.getFullYear() + '-',
m = date.getMonth() + 1 + '-',
d = date.getDate() + ' ',
h = (date.getHours() <= 9 ? '0' + date.getHours() : date.getHours()) + ':',
min = (date.getMinutes() <= 9 ? '0' + date.getMinutes() : date.getMinutes()) + ':',
s = (date.getSeconds() <= 9 ? '0' + date.getSeconds() : date.getSeconds());
return y + m + d + h + min + s;
}
}
new Date() | timerFilter
事件修饰符
- 传统的阻止事件冒泡,阻止默认行为的方式
<button @click=change($event)></button>
methods: {
change(e) {
e.stopPropagation()
e.preventDefault();
}
}
- 修饰符的方式
<button @click.stop=change></button>
<button @click.prevent=change></button>
<button @click.once=change></button>
computed 计算属性
computed 能够实现响应式数据,时刻检测数据的变化,相比于methods中的方法,computed还具有惰性,当数据不发生改变时,不会触发数据的改变,因此性能较好
computed: {
total: () => {
return this.price*this.count;
}
}
|