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过滤器个人总结--完整代码的主要内容,如果未能解决你的问题,请参考以下文章

vue_cli组件通信个人总结--完整代码

vue_cli路由传参个人总结--完整代码

vue_cli自定义指令个人总结--完整代码

vue_cli封装axios--完整代码

Huawei_Netconf_Ncclient

完整逆波兰计算器(Java)