一、深入剖析过滤器
1.认识过滤器
自定义过滤器，用于一些常见的文本格式化。
过滤器可用在两个地方：双花括号插值 和 v-bind 表达式，添加在JS表达式的尾部，由“管道”符号表示:
<!-- 在双花括号中 -->
{
{ message | filter }}
<!-- 在 v-bind 中 -->
<div v-bind:id="id | filter"></div>
2.定义过滤器
全局过滤器：
<script>
Vue.filter('filter1',()=>{
});
</script>
局部过滤器：
<script>
const vm = new Vue({
el: '#app',
data: {
},
filters: {
}
});
</script>
3.参数
当过滤器形式为 msg | filter 时，filter过滤器接收一个参数，参数为msg。
当过滤器形式为 msg | filter('a')时，filter过滤器接收两个参数，参数为msg, 'a'
<div id="app">
{
{
msg | filter1('a') }}
</div>
<script>
Vue.filter('filter1',(val,a)=>{
console.log(a);
return Number(val);
});
const vm = new Vue({
el: '#app',
data: {
msg: 'gg1314520'
}
});
</script>
4.过滤器串联
{
{
msg | filterA | filterB }}
在这个例子中，filterA的参数为msg，filterB的参数为filterA，即filterA处理后将结果再交给filterB处理，最后返回。
5.练习
1.首字母大写
<div id="app">
{
{ content | filter1 }}
</div>
<script>
Vue.filter('filter1',(val)=>{
if(!val) {
return };
return val.charAt(0).toUpperCase() + val.slice(1);
});
const vm = new Vue({
el: '#app',
data: {
content : 'jimo'
}
});
</script>
2.数字中间加上逗号
<div id="app">
{
{ money | toMoney }}
</div>
<script>
Vue.filter('toMoney',(value)=>{
if(!value) {
return };
return value.toLocaleString();
});
const vm = new Vue({
el: '#app',
data: {
money: 1314520555
}
});
</script>
3.数字添加文字“万”
<div id="app">
{
{ money | addWord }}
</div>
<script>
Vue.filter('addWord',(value)=>{
if(!value) {
return };
if(value > 10000) {
return ( value / 10000).toFixed(1) + '万';
}
return value;
});
const vm = new Vue({
el: '#app',
data: {
money: 1314520555,
content : 'jimo'
}
});
</script>
