关于vue.js:浅谈VUE中的过滤器

39次阅读

共计 1546 个字符，预计需要花费 4 分钟才能阅读完成。

其实，过滤器实质就是一种办法，这不难理解，形象一点来说，过滤器就像化学试验中的漏斗，过滤掉没有用的杂质，提取本人想要的物质。形象一点来讲过滤器就是在 vue 中是以约定好的格局进行代码的编写并且实现相干的性能一种非凡办法。然而理论过程中 vue 过滤器并不像实在的漏斗实现简略过滤那么简略，通常来讲，实在的漏斗是在现有根底上，过滤出来现有的货色，能够疏忽的是物质自身不产生扭转，这只是一个简略的过滤。而 vue 中过滤器能够了解为深度的（简单的）过滤，能够认为，vue 中过滤器既能够在现有根底上，过滤出来现有的数据，数据自身不产生扭转，也能够为了失去预期的数据，做出一些扭转，也就是说过滤即是扭转，这种扭转是可预知的，用具体方法实现的。

 过滤器实现展现代码
<!-- 在双花括号中 -->
{{须要过滤的变量 | 过滤器名称}}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="须要过滤的变量 | 过滤器名称"></div>
// 过滤器个别用在 Mustache 语法又叫大括号语法中居多
// 须要过滤的变量个别就是展现的数据
// 过滤器名称实质就是办法名，上文提到过滤器也是一种非凡的办法

本地过滤器实现性能代码

filters: {过滤器名称: function (val) {// 这个局部就是过滤器办法实现的过程，这取决于你想要的成果}
}

全局过滤器实现性能代码

Vue.filter('过滤器名称', function( 参数) {// 这个局部就是过滤器办法实现的过程，这取决于你想要的成果})
1
2
3

 过滤器实现展现代码
{{须要过滤的变量 | dateFormat}}
// 过滤器个别用在 Mustache 语法又叫大括号语法中
// 须要过滤的变量个别就是展现的数据
// 过滤器的名称实质就是办法名，上文提到过滤器也是一种非凡的办法

过滤器实现性能代码

Vue.filter('dateFormat', function(Val) {const dt = new Date(Val)
  
  const y = dt.getFullYear()
  
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  
  const d = (dt.getDate() + '').padStart(2,'0')

  const hh = (dt.getHours() + '').padStart(2,'0')
  
  const mm = (dt.getMinutes() + '').padStart(2,'0')
  
  const ss = (dt.getSeconds() + '').padStart(2,'0') 
  
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`})

过滤器中一种强化过滤也就是官网提到的“过滤器能够串联”
强化过滤器实现展现代码

{{message | filter1 | filter2}}
// 强化过滤器存在的意义就是变量过于简单，须要反复筛选，屡次过滤

在这个例子中，filter1 被定义为接管单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。而后持续调用同样被定义为接管单个参数的过滤器函数 filter2，将 filter1 的后果传递到 filter2 中。
过滤器是 JavaScript 函数，因而能够接管参数：
{{message | filter1('arg1', arg2) }}
这里，filter1 被定义为接管三个参数的过滤器函数。其中 message 的值作为第一个参数，一般字符串‘arg1’作为第二个参数，表达式 arg2 的值作为第三个参数。
本文是初学 vue 的我对过滤器的一些见解，如有有余，还请多多指教。无关过滤器官网教程还请参考 vue 官网:vue 官网 –> 过滤器

正文完