Vue中的filters以及递归（Recursion）

1. Vue中的filters

• 定义：包含 Vue 实例可用过滤器的哈希表。
• 实现方式：

1. 在export default{}中的filters属性定义需要的过滤函数；

• 其中，convert为自定义字符串标准转换方法；
• fixed为自定义取指定小数位数函数；

<template>
    <div class="box">
        <h2>04_Filter</h2>
        {{ num1 | convert('zh') | fixed(3) }}
        {{ num1 | convert('en')| fixed(2) }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            num1: 998.989877655
        }
    },
    filters: {
        convert(val, ...args) {
            if (args[0] === 'zh')
                return '￥' + val
            else return '$' + val
        },
        fixed(val, num) {
            if (typeof val === 'number')
                return val.toFixed(num);
            else return val.substring(0, val.indexOf('.') + num + 1);     
        }
    }
}
</script>

• 呈现的效果如下：

2. 也可以使用Vue.filter()注册全局过滤器

Vue.filter('my-filter', function (value) {  
// 返回处理后的值  
})

2. 递归（Recursion）

• 实现多级标题的展示以及缩进功能；

1. 数据准备

arr: [
  {
    t: '标题1', children: [
      {
        t: '标题1-1', children: [{
          t: '标题1-1-1'
        }]
      }
    ]
  },
  {
    t: '标题2', children: [
      {
        t: '标题2-2', children: [{
          t: '标题2-2-2'
        }]
      }
    ]
  },
]

2. 使用v-if实现Recursion组件的递归，使用v-for实现缩进功能；

• level代表当前标题层级，进入一次递归就+1；
• v-if="item.children"，判断当前标题是否还有子标题，有的话再次渲染Recursion组件；

<template>
    <div>
        <div v-for="(item, index) in arr">
            <span v-for="n in level">*</span>
            <span>{{ item.t }}</span>
            <Recursion v-if="item.children" :level="level+1" :arr="item.children" />
        </div>
    </div>
</template>
<script>
export default {
    name: 'Recursion',
    props: {
        arr: Array,
        level:{
            type:Number,
            default:()=>1
        }
    }
}
</script>

最终实现的效果：