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

<!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. 大规模 Transformer 模型 8 比特矩阵乘简介 - 基于 Hugging Face Transformers、Accelerate 以及 bitsandbytes

    引言 语言模型一直在变大.截至撰写本文时,PaLM 有 5400 亿参数,OPT.GPT-3 和 BLOOM 有大约 1760 亿参数,而且我们仍在继续朝着更大的模型发展.下图总结了最近的一些语言模型 ...

  2. 2022-10-04：以下go语言代码输出什么？A：{123} main.T{x:123} B：{123} T{x:123} C：boo boo D：boo main.T{x:123}。 packag

    2022-10-04:以下go语言代码输出什么?A:{123} main.T{x:123} B:{123} T{x:123} C:boo boo D:boo main.T{x:123}. packag ...

  3. 2021-11-22：给定一个正数数组arr，表示每个小朋友的得分； 任何两个相邻的小朋友，如果得分一样，怎么分糖果无所谓，但如果得分不一样，分数大的一定要比分数少的多拿一些糖果； 假设所有的小朋友坐

    2021-11-22:给定一个正数数组arr,表示每个小朋友的得分: 任何两个相邻的小朋友,如果得分一样,怎么分糖果无所谓,但如果得分不一样,分数大的一定要比分数少的多拿一些糖果: 假设所有的小朋友坐 ...

  4. Docker安装Airflow

    环境 系统:Ubuntu 22.04.2 LTS docker Version:20.10.21 docker-compose version 1.29.2, python3 --version Py ...

  5. asp.net WebApi JWT

    文章转自 https://blog.csdn.net/liwan09/article/details/83820651 参考资料: https://docs.microsoft.com/en-us/a ...

  6. 提升 Apache Hudi Upsert 性能的三个建议

    Apache Hudi 社区一直在快速发展,各公司正在寻找方法来利用其强大的功能来有效地摄取和管理大规模数据集. 每周社区都会收到一些常见问题,最常见的问题与 Hudi 如何执行更新插入有关,以确保以 ...

  7. 2013年蓝桥杯C／C++大学A组省赛真题（颠倒的价牌）

    题目描述: 小李的店里专卖其它店中下架的样品电视机,可称为:样品电视专卖店. 其标价都是4位数字(即千元不等). 小李为了标价清晰.方便,使用了预制的类似数码管的标价签,只要用颜色笔涂数字就可以了(参 ...

  8. .netcore中的虚拟文件EmbeddedFile

    以前一直比较好奇像swagger,cap,skywalking等组件是如何实现引用一个dll即可在网页上展示界面的,难道这么多html,js,css等都是硬编码写死在代码文件中的?后面接触apb里面也 ...

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

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

  10. 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

    最近得空学习了下uniapp结合vue3搭建跨端项目.之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发.随着vite.js破局出圈,越来越多的项目偏向于vue3开 ...