Vue中filter函数 过滤器的使用
目录filters是什么?filters分为两类一:局部过滤器二:全局过滤器特别注意filters是什么?filters顾名思义是一个过滤器,就是对数据进行过滤筛选,将数据转化为我们想要的格式,但是他不会改变原始数据。filters分为两类一:局部过滤器局部过滤器的特点:只能作用于本组件没内定义局部过滤器:在本组件内直接定义即可(代码如下:)<script>export default
·
目录
filters是什么?
filters顾名思义是一个过滤器,就是对数据进行过滤筛选,将数据转化为我们想要的格式,但是他不会改变原始数据。
filters分为两类
一:局部过滤器
局部过滤器的特点:只能作用于本组件没内
定义局部过滤器:在本组件内直接定义即可(代码如下:)
<script>
export default {
// 定义局部过滤器
// filtersMoney ===> 定义局部过滤器的函数名(可自定义)
// val ===> 我们要修改/转化的数据
filters: {
filtersMoney(val){
return "¥"+val.toFixed(2)
}
},
}
</script>
定义完之后直接通过 管道符 | 调用即可(代码如下:)
<div> {{price | filtersMoney}} </div>
<!-- 管道符 前面的 price ===> 我们要修改/转化的数据 -->
<!-- 管道符 后面的 filtersMoney ===> 我们定义的局部过滤函数 -->
二:全局过滤器
全局过滤器的特点:可以作用于全部组件中
定义全局过滤器:在main.js 文件里面进行定义 (代码如下:)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 定义全局过滤器
// filterMoney ===> 定义全局过滤器的函数名(可自定义)
// val ===> 我们要修改/转化的数据
Vue.filter('filterMoney', function(val) {
return "¥" + (val * 1).toFixed(2);
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
定义完之后直接在需要的文件里面通过 管道符 | 进行调用即可(代码如下:)
<div> {{price | filterMoney}} </div>
<!-- 管道符 前面的 price ===> 我们要修改/转化的数据 -->
<!-- 管道符 后面的 filterMoney ===> 我们定义的全局过滤函数 -->
特别注意
一:定义局部过滤器 使用 filters 属性 该属性是一个对象,可以在其中定义多个过滤器函数
二:定义全局过滤器 使用 filter 属性 当然 在 main.js 文件中可以定义多个全局过滤器函数
三:当局部过滤器和全局过滤器 的函数名相同时 此时调用的过滤器将是局部过滤器函数
四:当出现父子组件时,父组件 和 全局中 分别定义了相同名称的过滤器,此时子组件中调用的过滤器将是全局过滤器函数
( 建议:定义 局部过滤器 和 全局过滤器 时函数名尽量区别开来,减少不必要的麻烦 )
此案例是 转化价钱格式 例如: 将 90.2 / 1 格式 转化为 ¥90.20 / ¥1.00 格式
更多推荐
已为社区贡献3条内容
所有评论(0)