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

<!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. python 编程规范有哪些？

    Python 编程规范主要包括代码布局.命名规范.注释规范.函数编写规范等多个方面,下面给出一些常见的编程规范及其示例代码. 1. 代码布局规范 代码布局规范主要是指代码的缩进.行宽.空行.换行等方面 ...

  2. 使用require.context实现优雅的预加载

    前言 在前端开发中,对页面花里胡哨度[注1]要求越高的页面,用到的图片.音频什么的就越多,比如什么结婚请柬.展会请柬.发布会宣传页.数据大屏.虽然现在浏览器不允许网页在没有用户交互的情况下播放音频,但 ...

  3. 2023-02-16：两种颜色的球，蓝色和红色，都按1～n编号，共计2n个， 为方便放在一个数组中，红球编号取负，篮球不变，并打乱顺序， 要求同一种颜色的球按编号升序排列，可以进行如下操作： 交换相邻

    2023-02-16:两种颜色的球,蓝色和红色,都按1-n编号,共计2n个, 为方便放在一个数组中,红球编号取负,篮球不变,并打乱顺序, 要求同一种颜色的球按编号升序排列,可以进行如下操作: 交换相邻 ...

  4. 2022-09-01：字符串的 波动 定义为子字符串中出现次数 最多 的字符次数与出现次数 最少 的字符次数之差。 给你一个字符串 s ，它只包含小写英文字母。请你返回 s 里所有 子字符串的 最大波

    2022-09-01:字符串的 波动 定义为子字符串中出现次数 最多 的字符次数与出现次数 最少 的字符次数之差. 给你一个字符串 s ,它只包含小写英文字母.请你返回 s 里所有 子字符串的 最大波 ...

  5. 2021-03-28：定义一种数：可以表示成若干（数量>1）连续正数和的数 。比如:5 = 2+3，5就是这样的数 ；12 = 3+4+5，12就是这样的数 。1不是这样的数，因为要求数量大于1个、连续正数和 。2 = 1 + 1，2也不是，因为等号右边不是连续正数 。给定一个参数N，返回是不是可以表示成若干连续正数和的数 。

    2021-03-28:定义一种数:可以表示成若干(数量>1)连续正数和的数 .比如:5 = 2+3,5就是这样的数 :12 = 3+4+5,12就是这样的数 .1不是这样的数,因为要求数量大于1 ...

  6. vue全家桶进阶之路18：Vue Router

    Vue Router 是 Vue.js 的官方路由管理器,它可以帮助我们实现单页应用(Single Page Application,SPA)的前端路由. Vue Router 基于 Vue.js 的 ...

  7. Python从零到壹丨详解图像锐化Roberts、Prewitt算子实现边缘检测

    摘要:图像锐化和边缘提取技术可以消除图像中的噪声,提取图像信息中用来表征图像的一些变量,为图像识别提供基础.本章主要介绍Robert算子.Prewitt算子.Sobel算子.Laplacian算子.S ...

  8. APRIL 2022-Explanation-Aware Experience Replay in Rule-Dense Environments

    I. INTRODUCTION 解释是人类智能的关键机制,这种机制有可能提高RL代理在复杂环境中的表现 实现这一目标的一个核心设计挑战是将解释集成到计算表示中.即使在最小的规则集变化下,将规则集(或部 ...

  9. 贪心算法基础及leetcode例题

    参考 理论 本质:找到每个阶段的局部最优,然后去推导得到全局最优 两个极端:常识&&很难: 很多同学通过了贪心的题目,但都不知道自己用了贪心算法,因为贪心有时候就是常识性的推导,所以会 ...

  10. L2-001 紧急救援 (25 分)

    1.题目描述: 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上.当 ...