Vue2.x教程之filter过滤器的使用
来源:互联网 发布:数据保护线缠绕方法 编辑:程序博客网 时间:2024/05/18 00:09
vue2.0以后已经放弃对自带的过滤器函数,但同时对开发人员提供了一个filter 的处理器,虽然命名为 filter ,但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下 输出前段需要的格式数据。
基本调用方法:
稍微复杂一点的数据处理:
- new Vue({
- // ...
- filters: {
- filterFun: function (value) {
- switch(value){
- case 1:return '初级';
- case 2:return '中级';
- case 2:return '高级';
- }
- }
- }
- })
注册全局的filter过滤器:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue自定义过滤器</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div class="test"> <p>{{message | sum}}</p> <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。--> <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突--> <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理--> </div> <script type="text/javascript"> // -----------------------------------------华丽分割线(从model->view)--------------------------------------- Vue.filter("sum", function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 return value + 4; }); Vue.filter('cal', function (value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 return value + begin + xing; });// -----------------------------------------华丽分割线(从view->model)--------------------------------------- Vue.filter("change", { read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值 return value; }, write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值 console.log("newVal:"+newVal); console.log("oldVal:"+oldVal); return newVal; } }); var myVue = new Vue({ el: ".test", data: { message:12 } }); </script> </body></html>
阅读全文
1 0
- Vue2.x教程之filter过滤器的使用
- Struts1.x FILTER过滤器的使用
- vue.js学习09之vue2.x实现vue1.x中默认的过滤器
- Filter过滤器的使用
- filter过滤器的使用
- filter过滤器的使用
- filter过滤器的使用
- Filter过滤器的使用
- 过滤器filter的使用
- Filter过滤器的使用
- 过滤器的使用-Filter
- vue2.0中过滤器的使用
- Vue2.0 过滤器的简单使用
- Java过滤器-Filter过滤器的使用
- filter[过滤器]的使用大全
- Filter-过滤器的使用详解
- JAVA过滤器的使用(Filter)
- Filter过滤器的简单使用
- PHP学习笔记:1.1 PHP安装
- 王爽.汇编.第三版.实验12.答案
- JarSigner
- Windows窗口消息大全,全不全自己看
- Android 混淆那些事儿
- Vue2.x教程之filter过滤器的使用
- Android进程管理机制和内存机制
- python操作Excel读写: xlrd
- vue环境安装
- 欢迎使用CSDN-markdown编辑器
- Operation category READ is not supported in state standby
- 数组的扩展
- 二分新姿势--倍增法
- BFS基础题 杭电2612 Find a way 1252 Hike on a Graph