vue过滤器 即通道符 "|"

1,用法:两种

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

2,定义方式:两种

  1)在一个组件的选项中定义本地的过滤器:与生命周期钩子同级,

filters: {
  capitalize: function (value) {
    if (!value) return ‘‘
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

  2)在创建 Vue 实例之前全局定义过滤器:

Vue.filter(‘capitalize‘, function (value) {
  if (!value) return ‘‘
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

同名时,优先使用组件内部的过滤器。

3,过滤器可以串联:

{{ message | filterA | filterB }}

message 为过滤器 filterA 的参数,filterA 的返回值为 filterB 的参数。

4,过滤器可以接受多个参数:

{{ message | filterA(‘arg1‘, arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1‘ 作为第二个参数,表达式 arg2 的值作为第三个参数。

原文地址:https://www.cnblogs.com/wangtong111/p/12405002.html

时间: 2024-10-29 13:45:11

vue过滤器 即通道符 "|"的相关文章

通道符的理解

通道符将前面的标准输出作为标准输入传递给后面的命令.如果标准输出是多行,那么通道符是如何传递的呢? 根据我的理解:标准输出后面跟上通道符后,以换行符为分隔符,输出到流中,然后,同样以换行符为界限,依次 作为标准输入传递到后面的命令里面. 举个例子: 1.先创建一个aa的文件,里面包含2行命令. mkdir a1 mkdir a2 2.然后执行命令: cat aa | bash 3.该命令会依创建2个目录a1,a2 以上例子说明,cat aa后产生的标准输出并不是一股脑的通过通道传递过去,而是首先

3.Vue过滤器

1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符指示: 2.过滤器调用时候的格式: 例如:下面HTML元素使用过滤器(在输出ctime的时候使用过滤器进行处理,| 管道符) <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td> 原文地址:https:

Vue过滤器

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> &

vue 过滤器用法

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 1.在一个组件的选项中定义本地的过滤器: filters: { w

vue 过滤器 基本用法

使用地点:双花括号插值和v-bind表达式. <div id="app"> <p>{{ message|capitalize}}</p> <div v-bind:id="message|capitalize"></div> </div> new Vue({ el:"#app", data:{ message:"pwd" }, filters:{ capit

Vue过滤器学习笔记(不定期更新)~~

1.json 过滤器 1 {{exp | json 4}} 将表达式exp转换为json字符串,本质上是JSON.stringify(),后面接收一个Number类型的参数,用于决定转化后的JSON字符串的缩进距离,不输默认是2

vue 过滤器

首字母大写 Vue.filter('capitalize', function (value) { if (!value) { return '' } value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

vue 过滤器使用的传参说明

在table中,需要对obj的数据类型进行文字转换,例如后台接口返回的姓别值:1,2.其中需要页面根据字典需要把1=>男,2=>女进行转换. 以前的习惯是每一个过滤方法都写一个方法进行转换,例如: 页面代码: <el-table-column width="200px"align="left" label="性别"> <template slot-scope="scope"> <spa

过滤器总结 微信小程序和百度智能小程序和vue过滤器

因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面.这里我命名为imgFilter.wxs(因为我项目里是用来处理图片的,哈哈) 1.2:写代码,为了方便理解,下面是一个简单的返回一个字符串拼接,当然里面的函数你想怎么处理都行,这里主要介绍思路和基本实现. var bar = function (x) { return 'hello'+ x; } m