vue_cli过滤器个人总结--完整代码
Posted 码妈
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue_cli过滤器个人总结--完整代码相关的知识,希望对你有一定的参考价值。
// 在双花括号中
{{ message | capitalize }}
// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>
过滤器–局部
在filters:{ … }中书写
<template>
<div class="parent">
<!-- 要过滤的值 自定义的过滤名称 -->
<p>价格:{{ 666 | formatMoney }}</p>
</div>
</template>
<script>
export default {
name: 'Parent',
filters: {
formatMoney: (value) => {
if (value) {
value = Number(value)
return '¥ ' + value.toFixed(2) // 把过滤的结果return出去
}
}
}
}
</script>
过滤器–全局
新建一个filter文件夹,再新建一个filter.js
// 过滤价格
// 自定义过滤名称 要过滤的值
export const formatMoney = (value) => {
if (value) {
value = Number(value)
return '¥ ' + value.toFixed(2) // 把过滤的结果return出去
}
}
在main.js中引入和挂载
import * as filters from './assets/filter/filter.js'
// 将导出的每个过滤器方法挂载
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
在组件中使用
<template>
<div class="parent">
<!-- 要过滤的值 自定义的过滤名称 -->
<p>价格:{{ 666 | formatMoney }}</p>
</div>
</template>
结果
以上是关于vue_cli过滤器个人总结--完整代码的主要内容,如果未能解决你的问题,请参考以下文章