Vue2.0系列之过滤器的使用

vue2.0已经废弃了过滤器，需要自定义过滤器，用于一些常见的文本格式化。

感觉超级好用！！

过滤器可以用在两个地方：双花括号插值 和 v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部，由管道符指示。

一、注册全局过滤器

注意事项：
1、全局方法Vue.filter()注册一个自定义过滤器，必须放在vue实例化前面
2、过滤器函数始终以表达式的值作为第一个参数，带引号的参数视为字符串，而不带引号的参数按表达式计算
3、可以设置两个过滤器参数，前提这两个过滤器处理的不冲突
4、用户从input输入的数据在会传到model之前也可以先处理

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<div id="app">
  <!-- 首字符串大写 -->
  <div>首字母大写过滤器：{{str | upcase}}</div>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p>
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    // 全局注册一个求和过滤器
    Vue.filter('sum', function (value, a, b) {
      return value + a + b;
    });

    var demo = new Vue({
      el: "#app",
      data: {
        str:'hello',
        message:12
      }
    });
</script>
</body>
</html>

案例效果：

二、注册在实例化内部

过滤器也可以注册在实例内部，仅在使用它的实例里面注册。

根据以上案例改编：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <!-- 首字符串大写 -->
  <div>首字母大写过滤器：{{str | upcase}}</div>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器：{{message | sum(10,20)}}</p>
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:'hello',
        message:12
      },
      filters: {
        upcase:function(value){
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        sum:function(value, a, b){
          return value + a + b;
        }
      }
    });

</script>
</body>
</html>

效果：

三、常见过滤器

根据时间戳转化成时间格式：mm-dd hh:tt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <!-- 将时间戳转化为时间 -->
  <h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:1517568434324,
      },
      filters: {
        formateTime:function(nS){
          return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
        }
      }
    });

</script>
</body>
</html>

案例效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js每天必学之过滤器与自定义过滤器
  • Vue.js -- 过滤器使用总结
  • 详解Vue2.0里过滤器容易踩到的坑
  • Vue.js学习之过滤器详解
  • 详解vue过滤器在v2.0版本用法
  • Vue2.0实现1.0的搜索过滤器功能实例代码
  • vue数字类型过滤器的示例代码
  • vue.js中过滤器的使用教程
  • 详解VUE2.X过滤器的使用方法
  • Vue 过滤器filters及基本用法
赞 (0)

相关推荐

  • vue数字类型过滤器的示例代码

    vue数字类型过滤器的示例代码

    需求 只能输入数字 输入字母和特殊字符自动过滤掉 输入完成失焦自动加.00 如果输入了小数自动四舍五入为22.22类似这样格式 效果图 可以使用在普通js和angular里面,vue 直接调用 先上调用的函数 /** * User: sheyude * Date: 2017/9/4 0004 * Time: 上午 10:51 * */ let number = { twoWay: true, bind:function (el) { el.addEventListener('blur',func

  • 详解VUE2.X过滤器的使用方法

    详解VUE2.X过滤器的使用方法

    VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t

  • vue.js中过滤器的使用教程

    vue.js中过滤器的使用教程

    前言 大家再使用vue做项目时,查询功能当然必不可少,这就得使用vue强大的filter啦.其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了,但是她更大的的魅力在于自定义filter(之后的文章中会分享),正好我最近做的项目中用到了这个.先给大家看下需求吧.如下图,这是一个通讯录页面,当我们在搜索栏中输入关键字时需要展示相应的员工,同时还得去掉A.B这样的字母索引,并且输入的关键字可以是中文也可以是拼音.     该页面引入搜索栏组件search-bar以及联系人组件

  • Vue.js学习之过滤器详解

    前言 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • Vue.js -- 过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +

  • 详解Vue2.0里过滤器容易踩到的坑

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); }); function里第一个参数value默认为使用这个过滤器的data对象内的值,在本例中是msg的值'you are mine'. 坑1:第一个参数必须为自身的值,后面可

  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat

  • Vue2.0实现1.0的搜索过滤器功能实例代码

    Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <body> <div class="app"> <input type="text" v-model="name"> <ul> <li v-for="user in newUsers" &

  • 详解vue过滤器在v2.0版本用法

    1.x写法 <body> <div id="app"> {{html|uppercase}} </div> <script> new Vue({ el:'#app', data:{ msg:"123", html:"abc" } }) </script> </body> 但是2.0中已经废弃了过滤器,需要我们自定义 <div id="app">

随机推荐