7.15 vue filter过滤器 事件修饰符

filter

全局过滤器

//addZero 过滤器的名称
Vue.filter('addZero',function(data) {
  return data < 10 ? '0' + data:data
})
//使用 
<div>{{num | addZero}}</div>

局部过滤器

filters: {
  //state是被过滤的数据 num
  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

事件修饰符

1. 传统的阻止事件冒泡，阻止默认行为的方式

<button @click=change($event)></button>
methods: {
   change(e) {
      e.stopPropagation()
      e.preventDefault();
   }
}

2. 修饰符的方式

//阻止冒泡
<button @click.stop=change></button>
// 阻止默认行为
<button @click.prevent=change></button>
//只触发一次的修饰符  只触发一次该change事件，
<button @click.once=change></button>

computed 计算属性

computed 能够实现响应式数据，时刻检测数据的变化，相比于methods中的方法，computed还具有惰性，当数据不发生改变时，不会触发数据的改变，因此性能较好

computed: {
   total: () => {
      return this.price*this.count;
  }
}

//调用  this.total不用加（），相当于一个变量，不要当成函数使用，因此也不能接收参数