关于uni-app:uniapp过滤器兼容全平台写法

9次阅读

共计 538 个字符,预计需要花费 2 分钟才能阅读完成。

过滤器

过滤器是 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)]"/>
正文完
 0