Vuecli3中filter简单使用

Vuecli3中filter简单使⽤在scr⽬录下建⽴ filter⽂件夹,在⽂件价中新建⽂件 filter.js
我们可以将过滤器写在该⽂件夹下
export function firstFilter(value,dict){
return dict[value] ? dict[value]:value
}
接着我们在main.js中注册全局过滤器,加⼊如下代码
import * as filters from './filter/filter'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
这样我们就注册完了我可以在任意组件中直接使⽤这个过滤器
在test.vue中
<template>
<div>
<el-input v-model="testVal"/><br/>
{{testVal|firstFilter(dic)}}//testVal会作为第⼀个参数直接传⼊
</div>
</template>
<script>
export default {
data(){
return{
testVal: ' ',
dic:{//⼀般是传⼊
1:'first',
2:'secound'
  }
 }
简易过滤器}
}
</script>
<style>
</style>
输⼊1 输出 first

本文发布于:2024-09-22 07:28:24,感谢您对本站的认可!

本文链接:https://www.17tex.com/tex/2/350293.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:过滤器   组件   参数
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议