如何换个角度使用VUE过滤器详解

来源:脚本之家  责任编辑:小易  

}} 2、自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。 自定义过滤器的例子

前言

过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作。官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已。但最近在做两款APP时,遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨论。

是Vue实例中绑定的message 第二个过滤器filters3的入参是191、(第一个过滤器返回的值)false(第二个过滤器的第一个入参)、0.8(第二个过滤器的第二个入参) 1、Vue实例中

1. 定义一个日期格式化函数

json过ingfy滤器,可将表达式的值转化为Json字符串,本质上是ISON.stringfy(),接受一个Number参数,用于决定转化后的JSON字符串的缩进距离,不输默认是2

都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下

将数据转换为json的格式,然后在js文件里写 created:function(){ //用ajax或者vue-resource获取你的数据,并绑定到items里面 $.getJSON('url',function (items) { this.item

export function DateFmt(date, fmt) { if (date == null) return null; var o = { "M+": date.getMonth() + 1, // 月份 "d+": date.getDate(), // 日 "h+": date.getHours(), // 小时 "m+": date.getMinutes(), // 分 "s+": date.getSeconds(), // 秒 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度 "S": date.getMilliseconds() }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }

展开全部 比如orderBy 和 filterBy。而且我们可以链式调用过滤器,一个接一个过滤。因此,我们可以定义我们自己的过滤器在我们的Vue实例中

2. 使用过滤器 DateFmt

4. 使用VUE 新建三个文件,其中vue.js需要从网上下载: my.html my.js vue.js 4.1 新建my 使用的解决办法Vue学习笔记进阶篇之vue-router安装及使用方法详解使用nodeJs安装V

定义好函数后,我们采用全局注册filter的方式。在main.js中使用import { DateFmt } from '@/filters/DateFmt.js' 导入我们上边定义的函数。 使用Vue.filter("DateFmt", DateFmt) 完成filter全局注册。

前言 大家再使用vue做项目时,查询功能当然必不可少,这就得使用vue强大的filter啦。其 过滤的内容, filterBy是返回过滤后的数组,orderBy是排序,前者的使用方法是filterBy 一个

在components文件夹中,添加我们的测试组件DateFormat.vue,在该文件template>div节点下输入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}} 然后在app.vue引入我们刚新添加的组件,运行,你就会在看到当前日期已经按照我们需要的格式显示在网页上。是的,就是这么简单,那完了么?

Vue.js 的编译器为它添加特殊功能。 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 2.使用组件

3. 在JS中使用 DateFmt

一点都不像我。 “ 我使用vue中的http方法异步删除一个图片,后端怎么也接收不到我发 @RequestBody 以上所述是小编给大家介绍的vue使用$http服务端收不到参数详解整合

好奇的朋友会发现,我们定义的filter都是在template中使用的,那我如何在js代码中使用呢?当然,在开发这两个app期间,减少数据转换的次数,有了这样的需求。

将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 lt;son-tmp> 您可能感兴趣的文章:详解vue slot插槽的使用方法Vue作用域插槽slot-scope实例代

3.1 在组件页面导入函数

Vue中使用vux的配置,分为两种情况: 一、根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板

回到开头,我们强调了一下,过滤器其实就是一个函数。既然是函数,那引入就好了。所以在我们最初建立 DateFormat.vue 单文件组件的<script>块中使用import { DateFmt } from '@/filters/DateFmt.js'导入我们的函数。代码如下:

使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更 标签页切换效果(vue-cli)详解vue-cli快速构建项目以及引入bootstrap、jq详解如何使用vu

<script> import { DateFmt } from '@/filters/DateFmt.js'; export default { data(){ return{ curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss') }}} </script>

即使此时数据为空。 在使用ajax获取数据时,使用vue-resource 更加合适。 使用vue-resource代码如下: <script type="text/javascript"> new Vue({ el:'#app', data:{d

在我们<template>中新加一个元素,并绑定 curDateImportFilter属性,运行 npm run serve 回到浏览器,你就会看到两个格式化日期。这样好吗?我们多了一个import , 虽然实现了,但觉得不够好。

config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例与过滤器 若配置 使用axios进行跨域请求的方法vue使用axios跨域请求数据问题详解vue中axios处理http

3.2 使用Vue.filter 返回过滤器

如果我们仔细看官方文档,就会发现官说明了,通过 Vue.filter("filter")返回定义的函数 ,所以Vue.filter不仅可以注册,还可以返回。

我们继续在data中添加属性 :

curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')

通过上边的步骤绑定该属性,你会在浏览器上看到三个格式化好的日期。要使用Vue.filter,我们不得不额外的导入import Vue from 'vue'。跟上边一样,虽然实现了,但不够好。

3.3 使用实例属性$options

在vue组件,每个组件都有各自的属性,这些属性大多挂载中属性 $options中,在chrome浏览器打印$vm0信息,我们就找到filter的信息。这里科普一下,在安装vue开发者工具后$vm0表示我们当前选择的组件,结果如下图所示:

从图形上看,当前组件的filters为一个对象,并不能直接找到,不过展开至__proto__原型上看到了我们的DateFmt方法。好了现在我们在继续在data中添加属性

curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')

是的,采用这个方式,就不用再引入vue或者函数了,跟直接在template使用一样。简洁方便,感觉好多了。在深入一点,通过调试我们就会发现 Vue.filter 是调用options.filters原型上的方法,如下图所示

4. 总结

再简单的功能,也有你想不到的用法。做开发,还是要会发散。本来这篇文章还想分享一下 vue 中scope css穿透功能。为了方便阅读,就且听下回分解吧。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

详解vue如何使用rules对表单字段进行校验

1、在代码中,添加属性::rule

<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con"> <FormItem prop="phone"> <Input v-model="form.phone" prefix="md-person" placeholder="请输入您的手机号" size="large" class="login-form-input" :maxlength="11"></Input> </FormItem> <FormItem prop="password"> <Input type="password" v-model="form.password" prefix="md-lock" placeholder="请输入您的密码" size="large" class="login-form-input" :maxlength="100"></Input> </FormItem> <FormItem prop="code"> <Input v-model="form.code" placeholder="请输入验证码" prefix="ios-barcode" size="large" class="login-form-input" :maxlength="4"></Input> <img @click="refLoginImg" :src="loginImgSrc" class="login-img"/> </FormItem> <FormItem> <Button @click="handleSubmit" :loading="submitLoading" type="info" long size="large" class="login-btn" icon="md-log-in"> <span v-if="!submitLoading">立即登录</span> <span v-else>正在登录,请稍候...</span> </Button> </FormItem> </Form>

2.新建一个文件(validate.js)定义验证规则

/** 这个文件只允许放表单验证方法 **/ //验证手机号 export function isPhone(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } var pattern = /^1[34578]\d{9}$/ if(pattern.test(value)){ return callback() } return callback(new Error('输入的手机号错误')) }

3、在页面(xx.vue)中引入验证规则定义的文件,并在export default中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发} validator

rules: { phone: [ { required: true, message: '手机号不能为空', trigger: 'blur' }, { type: 'string', min: 11, message: '手机号不允许小于11位', trigger: 'blur' }, { validator: isPhone, trigger: 'blur' }, ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, { type: 'string', min: 6, message: '密码不允许小于6位', trigger: 'blur' }, ], code: [ { required: true, message: '验证码不能为空', trigger: 'blur' }, { type: 'string', min: 4, message: '验证码必须是4位', trigger: 'blur' }, ], },

以下是validator.js文件的部分验证方法

/* 是否是公司邮箱*/ export function isWscnEmail(str) { const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i; return reg.test(str.trim()); } /* 合法uri*/ export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; return urlregex.test(textval); } // 验证是否整数 export function isInteger(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数')); } else { callback(); } } }, 1000); } // 验证是否是[0-1]的小数 export function isDecimal(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入数字')); } else { if (value < 0 || value > 1) { callback(new Error('请输入[0,1]之间的数字')); } else { callback(); } } }, 1000); } // 验证端口是否在[0,65535]之间 export function isPort(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { callback(new Error('请输入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); } } }, 1000); } /* 小写字母*/ export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str); }

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

您可能感兴趣的文章:vue 使用自定义指令实现表单校验的方法vue表单自定义校验规则介绍vue中vee validate表单校验的几种基本使用VeeValidate在vue项目里表单校验应用案例Vue2.0表单校验组件vee-validate的使用详解Vue.js 表单校验插件

详解如何在vue项目中使用layui框架及采坑

根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui

1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨)

在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错。

所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入

2.第二个坑:下载的文件包必须放在static文件中

我尝试了把下载的文件夹放在与html文件的同级目录下和放在src目录下或者放在assets目录下,均报layui没有定义的错误

3.正确的使用姿势:

我们把文件放在static文件下,然后在html文件下引入,这样就可以在任意的组件中使用到layui这个对象了,这样我们就可以正确的使用layui里面的各种ui组件了

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>pm</title> <link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css" rel="external nofollow" /> <script type="text/javascript" src="./static/layui/layui.js"></script> <style type="text/css"> body,html{ margin:0; padding:1; } </style> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

要使用的组件:

<template> <div class="layui-progress"> <div class="layui-progress-bar" lay-percent="10%"></div> </div> </template> <script> export default{ data(){ return { } }, mounted(){ layui.use('element', function(){ var element = layui.element }) }, methods:{ } } </script>

以上是个人使用时的一些经验总结,如各位有更好的建议或者本人有错误之处都可以反馈出来,希望能帮到大家,谢谢

以上所述是小编给大家介绍的vue使用layui框架详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:解决layui前端框架 form表单,table表等内置控件不显示的问题layui框架table 数据表格的方法级渲染详解layui前端框架之table表数据的刷新方法layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例layui框架中layer父子页面交互的方法分析layui前段框架日期控件使用方法详解

vue v-text 后面使用一个过滤器 怎么结合过滤器

jquery 在没有使用jquery等第三方库的情况下,首先要获得该元素,原生js可以使用document.getElementById(id)方法

vue v-text 后面使用一个过滤器 怎么结合过滤器

jquery 在没有使用jquery等第三方库的情况下,首先要获得该元素,原生js可以使用document.getElementById(id)方法

详解Vue.js 2.0 如何使用axios

Vue.js 1.0 我们常使用 vue-resource (官方ajax库), Vue 2.0 发布后作者宣告不再对 vue-resource 进行更新, 推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用)

安装 axios

使用 npm

npm install axios

使用 yarn

yarn add axios

使用 axios

如同使用 vue-resource 一样使用

main.js

import axios from 'axios' Vue.prototype.$http = axios

执行 GET 请求

this.$http.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

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


  • 本文相关:
  • vue filters过滤器的使用方法
  • vue.js -- 过滤器使用总结
  • vue过滤器的用法和自定义过滤器使用
  • 在vue中使用公共过滤器filter的方法
  • vue2.0系列之过滤器的使用
  • vue.js中过滤器的使用教程
  • 详解vue2.x过滤器的使用方法
  • vue自定义过滤器创建和使用方法详解
  • vue2 v-model/v-text 中使用过滤器的方法示例
  • vue 内置过滤器的使用总结(附加自定义过滤器)
  • 利用vue.js+node.js+mongodb实现一个博客系统(附源码)
  • vue自定义过滤器格式化数字三位加一逗号实现代码
  • 使用vue-cli3新建一个项目并写好基本配置(推荐)
  • 轻量级富文本编辑器wangeditor结合vue使用方法示例
  • vue.js删除动态绑定的radio的指定项
  • vue.js中指令directives详解
  • 基于vue+canvas的excel-like组件实例详解
  • vue-router基础学习笔记(小结)
  • 基于vue的验证码组件的示例代码
  • 客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
  • 详解vue如何使用rules对表单字段进行校验
  • 详解如何在vue项目中使用layui框架及采坑
  • -text 后面使用一个过滤器 怎么结合过滤器
  • -text 后面使用一个过滤器 怎么结合过滤器
  • 详解Vue.js 2.0 如何使用axios
  • Vue过滤器的用法和自定义过滤器使用
  • Vue filters过滤器的使用方法
  • vue过滤器怎样过滤前10个字符
  • vue 过滤器怎么传vue data里面定义的数据
  • vue过滤器在v2.0版本怎么用
  • VUE安装使用教程详解
  • vue.js中过滤器的使用教程
  • Vue组件的使用教程详解
  • 详解vue使用$http服务端收不到参数
  • 详解vue使用插槽分发内容slot的用法
  • Vue中使用vux的配置详解
  • 详解使用vue-cli脚手架初始化Vue项目下的项目结构
  • 详解vue 中使用 AJAX获取数据的方法
  • vue项目中axios使用详解
  • 实例详解Vue项目使用eslint + prettier规范代码风格
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved