小白都能看明白的Vue中过滤器(filter)的使用详解
Vue 详解 filter 过滤器 小白 明白 使用
2023-09-11 14:19:18 时间
Vue中过滤器(filter)的使用
源码 点击
1. 局部过滤器
语法
- template
<div>{{ name | capitalize }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>
- script
filters: {
capitalize: function (value) {
return value
}
}
说明
- 过滤器函数中的
value
,就是|
前面的值,它相当于第一个参数 - 在过滤器函数中一定要返回一个值,他就是我们对格式处理后的结果
- 通俗的来讲,当为一个数据绑定一个过滤器后,每一次渲染这个数据的时候,他都会调用相应过滤器的函数
实战
- 使用vue-cli下载一个默认的项目,我使用
vue/cli4
默认的目录如下
- 在
components
文件夹下新建FilterLoc.vue
表示局部的过滤器,并写上如下代码,我们的目的是把sunwukong
首字母变成大写
<template>
<div>{{name | capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'sunwukong'
}
},
filters:{
//当value改变的时候,他会执行这个函数
capitalize:function (value) {
//一定要返回一个值才能在组件中正常显示
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
- 我们在
App.vue
中引入并映射成组件
<template>
<div><filter-loc></filter-loc></div>
</template>
<script>
import FilterLoc from '@/components/FilterLoc'
export default {
components:{
FilterLoc
}
}
</script>
- 运行项目,观察效果,我们发下
sunwukong
首字母已经大写
2. 全局过滤器
语法
Vue.filter('capitalize', function (value) {
return value
})
- 使用与说明与局部的过滤器差不多
- 定义了全局过滤器我们可以再任何一个地方使用过滤器
实战
- 我们可以在入口文件定义全局过滤器,当然也可以是其他文件,这里我们把最后一个首字母变成大写
- main.js
/* 定义全局过滤器 */
Vue.filter('capitalize', function (value) {
if (!value) return ''
const length = value.length - 1
value = value.toString()
return value.slice(0,length) + value.charAt(length).toUpperCase()
})
- 在
components
文件夹下新建FilterGlo.vue
表示使用全局过滤器,并写上如下代码,直接使用过滤器
<template>
<div>{{name | capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'zhubajie'
}
}
}
</script>
- 我们在
App.vue
中引入并映射成组件,运行项目观察效果
说明
4. 其实刚刚我们定义了两个id
相同的过滤器,但是我们发现局部的并没有改变,于是我们就发现了,过滤器的优先级:局部的要比全局的优先级高
3. 串联过滤器
语法
<div>{{ message | filterA | filterB }}</div>
- 后一个过滤器接收的参数为前一个参数的返回值
实战
- 在
components
文件夹下新建FilterSer.vue
表示使用串联过滤器,并写上如下代码,直接使用全局过滤器(尾字母大写),和我们自定义的过滤器(首字母大写)
<template>
<div>{{name|initalWord|capitalize}}</div>
</template>
<script>
export default {
data(){
return {
name:'shawujing'
}
},
filters:{
initalWord:function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
- 我们在
App.vue
中引入并映射成组件,运行项目观察效果,我们发现两个选择器都使用上了
4. 过滤器的参数
语法
<div>{{ message | filterA('arg1', arg2) }}</div>
实战
- 在
components
文件夹下新建FilterParam.vue
表示使用过滤器参数,并写上如下代码,定义了一个过滤器,并传递了参数
<template>
<div>{{name|paramsFil('白骨精','白龙马')}}</div>
</template>
<script>
export default {
data(){
return {
name:'师徒四人'
}
},
filters:{
paramsFil:function (value,arg1,arg2) {
console.log(value,arg1,arg2)
return value + arg1 + arg2
}
}
}
</script>
- 我们在
App.vue
中引入并映射成组件,运行项目观察效果
- 我们在看看控制台的输出
- 通过
filterA('arg1', arg2)
传入的参数为过滤器的后两个参数
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- vue全家桶+axios+jsonp+es6 仿肤君试用小程序
- vue.config.js常用配置详解
- Web前端 - Vue
- [Vue] Load components when needed with Vue async components
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
- vue.js3:用el-loading显示加载动画(vue@3.2.37 / element-plus@2.2.2)
- 【视频】vue指令v-on绑定事件
- Vue钩子函数
- 一个典型的Vue应用的App.vue
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 关于购物车添加按钮的动画(vue.js)
- 158:vue+openlayers 地图上Echarts模拟飞机循环飞行
- 048:vue+openlayers鼠标click显示企业名片(代码示例)
- 【vue】vue中axios的使用及vue生命周期详解_07
- 【vue】vue动态样式绑定详解_05
- 【三十天精通Vue 3】第十二天 Vue 3 的函数式组件详解(过滤器已废弃)
- 【三十天精通Vue 3】第六天 Vue 3 计算属性和监听器详解
- vue 文件目录结构详解
- vue中安装与引用echarts示例