vue定义 过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

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

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

你可以在一个组件的选项中定义本地的过滤器:

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

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

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

new Vue({
  // ...
})

原文地址:https://www.cnblogs.com/shun1015/p/12663129.html

时间: 2024-08-30 18:05:30

vue定义 过滤器的相关文章

VUE:过滤器及日期格式化moment库

VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>11_过滤器</title> </head> <body> <!-- 1)定义过滤器 Vue.filter(filterName,function(value[arg1,arg2,...])){ //进行一定的数组处理 ret

Vue的过滤器,生命周期的钩子函数和使用Vue-router

一.过滤器 1.局部过滤器 在当前组件内部使用过滤器 给某些数据 添油加醋 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } //使用 管道符 数据 | 过滤器的名字('alex','wusir') <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

Vue自定义过滤器

gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也

vue.js 过滤器

vue的过滤器可以用来对数据进行格式化 1.过滤器注册 过滤器注册分为全局注册和局部注册 (1)全局注册:所有的组件中都能使用 语法:Vue.filter(过滤器名称,回调函数) 回调函数的参数就是需要过滤处理的数据 //入口文件 main.js import Vue from 'vue' import App from './App' import router from './router' Vue.filter('toUpperCase',function(val){ return val

vue定义日期格式化过滤器

1.0 // 函数对象(Vue为一个函数,作为对象来使用) // Vue.filter('dateString',function(value,format){ // return moment(value).format(format||'YYYY-MM-DD HH:mm:ss') // }) 2.0 //也可以用形参默认值 Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){ return moment(v

vue之过滤器

在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器.需要提醒的是,如果你定义了一个全局过滤器,它必须在Vue实列之前定义,以上两种方式,我们将传递value作为参数. 全局过滤器 下面定义一个全局过滤器,用于在数据前加上大写的VUE.需要注意的是,过滤器定义必须始终位于Vue实例之上,

vue的过滤器语发及应用案例

1.使用地方: 双花括号插值处或  组件属性处 例: {{ message | capitalize }} <div v-bind:id="rawId | formatId"></div> 2.分为两种定义方式: (1)全局定义 Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUp

vue:过滤器

一.过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二.使用位置 过滤器只能应用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).例如: <!--在双花括号中使用 格式:{{值 | 过滤器的名称}}--> <div>{{3 | addZero}}</div> <!--在v-bind中使用 格式:v-bind:id=&qu

Vue定义组件和生命周期函数及实例演示!

定义全局组件 Vue.component("name",{...}) 定义局部组件 let Com = {....} new Vue({ data : ..., ..., components : { Name : Com } }) 定义组件时 对象内的属性 data : 数据模型(除了初始化 该属性必须是函数类型) methods : 封装方法(用于给模板调用) computed : 计算属性 watch : 监听某个数据模型的变化(默认只能监听基本数据类型,准确的来说应该是只能监听