vue之filter用法

1、全局写法：

　　全局过滤器必须写在vue实例创建之前。

Vue.filter('testfilter', function (value,text) {// 返回处理后的值return value+text})

2、局部写法：

在组件实例对象里挂载。

filters: {changemsg:(val,text)=>{return val + text}},

3、使用：

　　只能使用在{{}}和：v-bind中，定义时第一个参数固定为预处理的数，后面的数为调用时传入的参数，调用时参数第一个对应定义时第二个参数，依次往后类推

<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>//多个过滤器也可以串行使用<h2>{{name|filter1|filter2|filter3}}</h2>

4、vue-cli项目中注册多个全局过滤器写法：

//1.创建一个单独的文件定义并暴露函数对象
const filter1 = function (val) {return val + '--1'
}
const filter2 = function (val) {return val + '--2'
}
const filter3 = function (val) {return val + '--3'
}export default {filter1,filter2,filter3
}//2.导入main.js(在vue实例之前)
import filters from './filter/filter.js'//3.循环注册过滤器
Object.keys(filters).forEach(key=>{Vue.filter(key,filters[key])
})

转载于:https://www.cnblogs.com/superjsman/p/10052145.html

vue之filter用法相关推荐

你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
boost::log::filter用法的测试程序
boost::log::filter用法的测试程序实现功能 C++实现代码实现功能 boost::log::filter用法的测试程序 C++实现代码 #include <string> ...
boost::hana::filter用法的测试程序
boost::hana::filter用法的测试程序实现功能 C++实现代码实现功能 boost::hana::filter用法的测试程序 C++实现代码 #include <boost/h ...
boost::fusion::filter用法的测试程序
boost::fusion::filter用法的测试程序实现功能 C++实现代码实现功能 boost::fusion::filter用法的测试程序 C++实现代码 #include <boo ...
vue 具名插槽用法
vue 具名插槽用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
es6 filter 用法
filter用法 const newArr = [{code: "1", name: "cc" }, {code: "2", name: & ...
Vue中watch用法
Vue中watch用法我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue) 具体如下图: vue代码账户名称:<el-input v-model="qqNa ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...

vue之filter用法

vue之filter用法相关推荐

最新文章

热门文章