过滤器实例：转换首字母大写

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

  <input type="text" name="" v-model="uname">

   <div>{{uname | toUpper}}</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

Vue.filter('toUpper',function(val){

  var a= val.charAt(0).toUpperCase()+val.slice(1);

  return a;

});

new Vue({

  el: '#app',

  data: {

    uname:'hallo',

  }

})

</script>

</body>

</html>

过滤器的局部使用，以及在绑定属性中的使用实例

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

  <input type="text" name="" v-model="uname">

   <div :abc="uname | toUpper">{{uname | toLower}}</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

new Vue({

  el: '#app',

  data: {

    uname:'Hallo',

  },

  filters:{

    toLower:function(val){

      var a= val.toLowerCase();

      return a;

    },

    toUpper:function(val){

      return val.toUpperCase();

    }

  }

})

</script>

</body>

</html>

带参数的过滤器实例

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

  <input type="text" name="" v-model="uname">

   <div :abc="uname | toUpper">{{uname | toLower("aa","bb")}}</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

new Vue({

  el: '#app',

  data: {

    uname:'Hallo',

  },

  filters:{

    toLower:function(val,arg,arg1){

      var a= val.toLowerCase()+arg+arg1;

      return a;

    }

  }

})

</script>

</body>

</html>

2021-7-12 VUE的过滤器使用的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  5. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  6. VUE：过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  10. Java学习笔记：2021年12月31日下午-2022年1月1日上午

    Java学习笔记:2021年12月31日下午-2022年1月1日上午 摘要:主要记录了计算机的电气构成,学习Linux系统的原因以及关于Linux以及相关操作的基础知识. 目录 Java学习笔记:20 ...

随机推荐

  1. 搭建SpringCloudAlibaba父工程

    1.首先创建一个maven项目 删除src目录,当做一级目录用来管理第三方jar版本控制. 2.配置pom文件. SpringCloud.SpringCloudAlibaba.SpringBoot版本 ...

  2. Mysql Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘xx‘

    MySql执行分组sql报错: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated co ...

  3. Spring源码：Bean生命周期（四）

    前言 在之前的文章中,我们介绍了 Bean 的核心概念.Bean 定义的解析过程以及 Bean 创建的准备工作.在今天的文章中,我们将深入探讨 Bean 的创建过程,并主要讲解 createBean ...

  4. Django4全栈进阶之路15 项目实战（用户管理）：login.html登录画面设计

    要编写登录页面,我们需要完成以下步骤: template文件夹中创建 login.html 模板文件,输入以下 HTML 代码: {% extends 'base.html' %} {% block ...

  5. c3p0的配置及简单应用

    首先简单了解一下JDBC和c3p0 Java数据库连接,(Java Database Connectivity,简称JDBC)是Java语言中用来规范客户端程序如何来访问数据库的应用程序接口,提供了诸 ...

  6. < Python全景系列-6 > 掌握Python面向对象编程的关键：深度探索类与对象

    欢迎来到我们的系列博客<Python全景系列>!在这个系列中,我们将带领你从Python的基础知识开始,一步步深入到高级话题,帮助你掌握这门强大而灵活的编程语法.无论你是编程新手,还是有一 ...

  7. Request header field userRole is not allowed by Access-Control-Allow-Headers in preflight response.

    今使用axios 请求数据过程中遇到同事设置的请求头,在我请求的接口中部不被允许,于是老是提示Request header field userRole is not allowed by Acces ...

  8. 连接内网 SSH 新姿势，告别慢速度及防火墙限制

    近些年,因为某些原因,我们常常在家远程研发业务,当某些程序或业务代码在公司电脑上时,就需要访问公司电脑远程操作, SSH 登录 Linux 是一种非常常见的方式,但是在一些情况下,SSH 无法直接连接 ...

  9. 快速上手kettle（四）壶中可以倒出些啥？

    目录 前言 一 .kettle 这壶里能倒出啥? 二 .Access输出 2.1 Access输出设置 2.2 启动转换,查看输出 三 .Excel输出 3.1 选择excel扩展名 3.2 1 将表 ...

  10. 数位DP？记忆化罢了！

    我看了半天的数位 DP,DP 没学会,人倒是麻了. 解决什么 一般用于求解给你一个区间 \([l,r]\),问你其中满足条件的数有多少个. 这种题目还是蛮常见的,我们一般情况下暴力只能拿一少部分分,之 ...