1 、全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 和内部注册
<body>
...
<p>{{message | sum}}</p>
....
</body>
<!-- cdn -->
<script>
...
// 全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
Vue.filter('sum',value => value + 1 )
let vue = new Vue({
data: { message: 12 }
})
</script>
<!-- cli -->
<script>
// 注册在实例化内部
export default {
data () {
return {
message: 12
}
},
filters: {
sum (value) { reutrn value + 1 }
}
}
</script>
2 、vue filter 参数
<p>{{message | cal 10 20}}</p>
<!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
Vue.filter('cal', (value, begin, xing) => {
return value + begin + xing;
});3 、vue filter input 的输入触发周期
<input type="text" v-model="message | change">
<!--用户从input输入的数据在回传到model之前也可以先处理-->
Vue.filter("change", {
read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
return value;
},
write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
});标签： H5部分前端frontHTML&CSS