Vue.JS入门篇--过滤器

作者: hutou | 来源:发表于2015-12-28 19:10 被阅读8771次

概要

一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。过滤器在指令中由一个管道符 (|) 标记,并可以跟随一个或多个参数:

<element directive="expression | filterId [args...]"></element>

示例

过滤器必须放置在一个指令的值的最后:

<span v-text="message | capitalize"></span>

你也可以用在 mustache 风格的绑定的内部:

<span>{{message | uppercase}}</span>

可以串联多个过滤器:

<span>{{message | lowercase | reverse}}</span>

参数

一些过滤器是可以接受参数的。参数用空格分隔开:

<span>{{order | pluralize 'st' 'nd' 'rd' 'th'}}</span>
<input v-on="keyup: submitForm | key 'enter'">

纯字符串参数需要用引号包裹。无引号的参数会作为表达式在当前数据作用域内动态计算。

相关文章

  • 【Wireshark】- 入门篇(1)

    【Wireshark】- 入门篇(1)【Wireshark】- 过滤器(2)【Wireshark】- Statis...

  • Vue.JS入门篇--过滤器

    概要 一个 Vue.js 的过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。过滤器在指令中由一个管道...

  • 2018-09-17 vue.js

    vue.js 全局过滤器 局部过滤器 计算属性 1.过滤器 : 让要显示在页面上的内容进行重新筛选 全局过...

  • Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过...

  • Vue-04

    今天学习了过滤器; vue.js允许在表达式后面添加可选的过滤器,以管道符表示,eg:{{message|x}};...

  • vue 2.0 日期过滤器

    过滤器 Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。 过滤器使用: mustache插值 v-b...

  • 8,过滤器

    过滤器 概念:vue.js允许你自定义过滤器,可被用作一些文本的转换格式,过滤器可以用在两个地方,mustache...

  • Vue学习笔记入门篇——组件的使用

    本文为转载,原文:Vue学习笔记入门篇——组件的使用 组件定义 组件 (Component) 是 Vue.js 最...

  • VUE DAY2 (过滤器)

    Vue.js中允许自定义过滤器(早期提供有过滤器,2.x后不再提供)。过滤器可以用在两个地方:{{}} 和 v-b...

  • vuejs的v-bind:value=""中使用过滤器

    vue.js中,过滤器可以直接在template中绑定变量时使用 js代码:

网友评论

    本文标题:Vue.JS入门篇--过滤器

    本文链接:https://www.haomeiwen.com/subject/lumvhttx.html