uni-app过滤器兼容全平台写法

过滤器

过滤器是vue框架里格式化的功能，它非常方便，在原始的vue里面可以用于模板插值和组件属性

<div>{{ val | num(0) }}</div>
<div :id="val | num(0)"></div>

现在的小程序普遍提供了一套脚本语言可以完成相同的功能，比如微信的wxs，百度与字节的sjs。uni-app文档给的例子里面引入了多个版本的js文件，但是兼容性依然不够好，而且完全不兼容html-vue框架。

<script module="utils" lang="filter" src="./utils.filter.js"></script>
<script module="utils" lang="sjs" src="./utils.sjs"></script>

其实在vue里面过滤器是注册在$options上的。根据这点，可以写出一种兼容所有平台的写法。

<!-- 模板插值与之前一致 -->
<div>{{ val | num(0) }}</div>
<!-- 属性赋值改为表达式 -->
<input :value="$options.filters.num(val, 0)"/>
<!-- 类名属性需要加上中括号 -->
<img :class="[$options.filters.num(val, 0)]"/>