vue filter使用,vue的filters
在Vue中使用滤镜渲染数据是一种非常有趣的方式。下面这篇文章主要介绍Vue滤镜的实现和应用场景的相关信息，有需要的可以参考一下。
1. 简单介绍
Vue.js允许你自定义filter，可以用于一些常见的文本格式。
过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0开始支持)。
过滤器应该添加在JavaScript表达式的末尾，由“管道”符号表示：
！-在双花括号里-
{{邮件过滤器}}
！-在“v-bind”
div v-bind:msg= message filter /div
过滤器总是将表达式的值作为第一个参数。
在上面的示例中，filter filter函数将接收message的值作为第一个参数。
1.1过滤器可以串联连接。
{{邮件过滤器A 过滤器B }}
在本例中，filterA被定义为接收单个参数的过滤函数，表达式消息的值将作为参数传递给该函数。然后继续调用过滤函数filterB，也定义为接收单个参数，将filterA的结果传入filterB。
1.2过滤器是JavaScript函数可以接收参数。
{{ message filterA(arg1 ，arg2) }}
FilterA被定义为接收三个参数的过滤函数。message的值是第一个参数，普通字符串“arg1”是第二个参数，表达式arg2的值是第三个参数。
2. vue-cli中定义全局过滤器
语法：Vue.filter( filterName，()={return //数据处理结果})
例如：
div id=应用程序
h3 { {用户名地址名称}}/h3
/div
脚本
//参数1:是过滤器的名称，即管道符号后的处理函数；
//参数2:处理函数。处理功能的参数同上。
Vue.filter(addName ，(value)={
返回“我的名字是”值
})
让vm=new Vue({
埃尔： #app ，
数据：{
用户名：“小明”
}
})
/脚本
2.1 实际开发使用
全局过滤器通常用于修饰数据。通常，我们将处理函数取出，放在一个. js文件中。
//filter.js文件
让filterPrice=(值)={
返回已收值元
}
让filterDate=(值)={
返回值天数
}
导出默认值{filterPrice，filterDate}
在main.js中导入上面的filter.js文件，也可以在任何组件中导入，但是对于全局过滤器，最好在main.js中定义，导入的对象是一个对象，所以使用Object.keys()方法得到一个key的数组，遍历数据，让key作为全局过滤器的名称，后面跟着key对应的处理函数，这样在任何组件中，key都可以作为key使用。
//main.js
//下面是两种导入方式，推荐第一种。
从导入*作为筛选器。/utils/filter/filter
//从导入{filterPrice，filterDate}。/utils/filter/filter
console.log(过滤器)
object . key(filters . default)。forEach((item)={
Vue.filter(item，filter . default[item])
})
新Vue({
路由器，
店，
render: h=h(App)，
}).$ mount(“# app”)
3. 在组件中使用 全局过滤器：
//test.vue
模板
差异
输入类型=text v-model=filterCount
div { { filter count filter price } }/div
div { { filter count filter date } }/div
/div
/模板
脚本
导出默认值{
data(){
返回{
过滤器数量：1500
}
},
}
/脚本
3. vue-cli中定义局部过滤器
//test.vue
模板
差异
输入类型=text v-model=filterCount
div { { filter count filter price } }/div
div { { filter count filter date } }/div
/div
/模板
脚本
导出默认值{
data(){
返回{
过滤器数量：1500
}
},
}
/脚本
4. 常见使用场景
4.1 格式日期（时间）
场景一：后端传输时间：2019-11-19T04:32:46Z
安装moment.js
//main.js
从“时刻”导入时刻
//定义全局筛选时格式
Vue.filter(format ，function(val，arg){
如果(！val)返回；
val=val.toString()
返回力矩(val)。格式(参数)
})
//test.vue
模板
div class= filter { time format( YYYY-MM-DD HH:MM:SS )} }/div
/模板
脚本
导出默认值{
data(){
返回{
时间： 2019-11-19T04:32:46Z
}
}
}
/脚本
总结
关于Vue filter的实现和应用场景，本文到此结束。关于Vue滤镜的实现和应用的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。