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

<!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. MySQL-带你上官网看索引

    在我之前的一篇文章中,有引用一个讨论用Hash还是Tree的问题,DB中关于查找类数据结构,除了树,还有Hash(HashMap,HashSet). 存储数据结构之争 B+树主要是照顾磁盘IO这种特殊 ...

  2. C# 反射 操作列表类型属性

    本文介绍对列表进行创建及赋值的反射操作 我们现在有TestA.TestB类,TestA中有TestB类型列表的属性List,如下: 1 public class TestA 2 { 3 public ...

  3. [Pytorch框架] 2.1.4 数据的加载和预处理

    文章目录 PyTorch 基础 :数据的加载和预处理 Dataset Dataloader torchvision 包 torchvision.datasets torchvision.models ...

  4. 【必知必会的MySQL知识】mysql5.7安装教程

    1.下载mysql 下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载zip免安装版,可以省去很多事 2.将下载的安装文件 ...

  5. Linux xfs文件系统stat命令Birth字段为空的原因探究

    在Linux平台找出某个目录下创建时间最早的文件,测试验证脚本结果是否准确的过程中发现一个很有意思的现象,stat命令在一些平台下Birth字段有值,而在一些平台则为空值,如下所示: RHEL 8.7 ...

  6. 2021-09-24：给定一个正整数 n ，输出的第 n 项。前五项如下：1：1。2：11。3：21。4：1211。5：111221。第一项是数字 1 。描述前一项，这个数是 1 即 “ 一 个 1

    2021-09-24:给定一个正整数 n ,输出的第 n 项.前五项如下:1:1.2:11.3:21.4:1211.5:111221.第一项是数字 1 .描述前一项,这个数是 1 即 " 一 ...

  7. 2023-05-15：对于某些非负整数 k ，如果交换 s1 中两个字母的位置恰好 k 次， 能够使结果字符串等于 s2 ，则认为字符串 s1 和 s2 的 相似度为 k。 给你两个字母异位词 s1

    2023-05-15:对于某些非负整数 k ,如果交换 s1 中两个字母的位置恰好 k 次, 能够使结果字符串等于 s2 ,则认为字符串 s1 和 s2 的 相似度为 k. 给你两个字母异位词 s1 ...

  8. Maven安装、阿里云镜像配置、Idea中创建Maven项目、Tomcat的部署

    我为什么要学这个技术? 为了更快创建web开发项目和jar包 在javaweb开发中,需要使用大量的jar包,我们手动去导入: 如何能够让一个东西自动帮我导入和配置这个jar包 因此,Maven诞生了 ...

  9. 在DevExpress中使用BandedGridView表格实现多行表头的处理

    在之前较早随笔中介绍过实现多行表头的处理,通过手工创建字段以及映射数据源字段属性的方式实现,有些客户反映是否可以通过代码方式更方便的创建对应的处理操作,因此本篇随笔继续探讨这个多行表头的处理的操作,使 ...

  10. web自动化02-常见元素定位（不含xpath和css）

    1.熟悉前端基础   代码和元素是一一对应关系,程序需要通过代码中的某些特征,获取目标元素并进行操作 标签名     key = value      元素的属性和属性值   2.浏览器开发者工具   ...