Vue入门三、过滤器filter
2019-05-21 00:53
2276 查看
Vue中过滤器有两种:
1、全局过滤器Vue.filter('过滤器名',过滤方式fn);
2、组件内过滤器filters:{'过滤器名',过滤方式fn}
使用:{{msg|过滤器方法名}}
一、局部过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 我输入的:<input type="text" v-model="instring"><br> 正常输出的:{{instring}} <br> 反转输出:{{instring|rever}} <br> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data() { return { instring: '' } }, // 局部过滤器 filters: { // 默认第一个变量{{instring}}为参数 rever(val) { // 将输入的字符逐个分割进行反转再对得到的字符进行拼接 return val.split("").reverse().join("") } } }) </script> </body> </html>
二、全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 我输入的:<input type="text" v-model="instring"><br> 正常输出的:{{instring}} <br> {{instring|revers('反转输出:')}} </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> // 全局过滤器 // val={{instring}} args={{'反转输出:'}} Vue.filter('revers', function (val, args) { return args + val.split('').reverse().join('') }) new Vue({ el:'#app', data(){ return { instring:'' } } }) </script> </body> </html>
相关文章推荐
- Asp.Net MVC3 简单入门详解过滤器Filter(转载)
- vue从入门到进阶:过滤器filters(五)
- vue 项目中 自定义过滤器 全局使用 filter
- 在vue中使用公共过滤器filter的方法
- servlet过滤器Filter入门(转,有自己的例子)
- Asp.Net MVC3 简单入门详解过滤器Filter
- 过滤器(filter)入门
- Asp.Net MVC3 简单入门详解过滤器Filter
- Asp.Net MVC3 简单入门详解过滤器Filter
- Vue.js入门教程-过滤器
- 在vue中引用公共过滤器filter
- 04_过滤器Filter_01_入门简述
- AngularJS 从入门到精通(一 过滤器 Filter)
- Vue——过滤器 filter
- vue过滤器(filter)
- Vue过滤器 filter
- 【转】Asp.Net MVC3 简单入门详解过滤器Filter
- vue中过滤器filter的讲解
- Asp.Net MVC3 简单入门详解过滤器Filter
- JAVA入门[15]-过滤器filter