微信小程序制作网站_Vue2.0系列之过滤器的使用

发布时间:2021-01-08 16:19 作者:jianzhan

摘要: Vue2.0系列产品之过虑器的应用 本文关键详细介绍了Vue2.0系列产品之过虑器的应用,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧过虑器

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='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='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='zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js' /script 
 script type="text/javascript" 
 var demo = new Vue({
 el: "#app",
 data: {
 str:24,
 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 

案例效果:

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


  • 美团外卖买水果武汉市通

    8月10日,美团外卖买水果宣布登录武汉市,第一批给出10个站点,遮盖武汉市市汉阳区好几个小区。先前,美团外卖买水果已北京、上海市发布,为二地住户出示手机上买水果的便民利

  • 开发一个微信小程序需要

    开发设计设计方案一个手机上手机微信手机微信微信小程序,最开始需看看是本身开发设计设计方案还是找承揽方机构来开发设计设计方案。倘若本身开发设计设计方案,务必修建精锐

  • 手机微信微信小程序开发

    原题目:手机微信微信小程序开发设计自然环境构建 手机微信微信小程序可以说是近期最红的一个名词了,一经出現简直空袭了全部开发设计工作人员,自然许多App开发设计工作人员拥

  • 做手机微信微信小程序自

    模拟题目:做手机上手机微信手机微信微信小程序独立自主创业的商业服务服务小技巧 每一个人都是谈独立自主创业谈获得取得成功,这一阶段连搞淘宝网网,做自媒体平台服务平台,

  • 我国设计方案产品初次得

    就在前几日,全世界四大设计方案计划方案殊荣奖之一的“iF设计方案计划方案奖”在荷兰举行了颁奖典礼,手机上手机微信“扫二维码购”服务、“牛蛙”刷脸聪明伶俐屏2款产品得奖