vue金额格式化指南

一、vue金额格式化插件

Vue.js是一个流行的前端框架，有各种各样的插件可以帮助我们轻松地实现各种功能，包括格式化金额。以下是一些值得推荐的Vue.js金额格式化插件：

1、vue-currency-filter: 这个插件可以将数字格式化为货币的形式，并且支持多种货币单位。使用这个插件可以有效地减少前端代码中的格式化逻辑。

import Vue from 'vue'
import VueCurrencyFilter from 'vue-currency-filter'

Vue.use(VueCurrencyFilter, {
  symbol: '$',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: true
})

2、vue-numeric: 这个插件能够将数字字段转换为数字值，主要用于处理表单输入。

import Vue from 'vue'
import VueNumeric from 'vue-numeric'

Vue.use(VueNumeric)

二、vue代码格式化插件

编写大量的Vue.js代码往往需要大量的手工调整代码结构，在Vue.js的世界里，有许多代码扫描器和格式化程序能够自动完成这个任务。以下是一些值得推荐的Vue.js代码格式化插件：

1、vue-beautify: 这个插件给Vue.js代码添加缩进和空格，使其更易读。它基于js-beautify，并且支持多个文件类型。

{
    "indent_size": 2, //缩进宽度为2个空格
    "indent_char": " ", //缩进使用空格
    "indent_with_tabs": false, //false表示用空格代替制表符作为缩进字符
    "eol": "\n", //换行符CRLF
    "end_with_newline": true, //原样输出文件结尾的空行
    "preserve": true, //保留单行格式化
    "max_preserve_newlines": 5, //保留多少个回车换行符，默认5个
    "space_in_paren": false, //控制匿名函数前需不需要添加空格，默认false
    "space_after_anon_function": false, //控制匿名函数后需不需要添加空格，默认false
    "space_before_conditional": true, //控制条件声明前需不需要添加空格，默认true
    "break_chained_methods": false, // 是否断行书写链式操作符的方法
    "wrap_line_length": 120, //当一行超过多少字符时就进行换行操作
}

2、eslint-plugin-vue: 这个插件可以用于执行Vue.js代码的静态代码分析。它可以自动发现潜在的编码错误，并推荐相应的修复方法。

三、vue格式化金额

在Vue.js中，格式化金额就是将一个数字值按照货币格式显示。我们可以使用字符串的replace()方法或是自己编写一个简单的函数来实现：

1、使用replace()方法：

function formatMoney(num) {
    num = num.toFixed(2)
    num = parseFloat(num)
    num = num.toLocaleString()
    return num
}

2、自定义函数：

function formatMoney(money) {
  if (!money) return '0.00'
  let integer = Math.floor(money).toString()
  let decimal = (money - integer).toFixed(2).slice(2)
  let thousands = integer.split('').reverse().join('').replace(/(\d{3})/g, '$1,').replace(/,$/, '')
  return thousands.split('').reverse().join('') + '.' + decimal
}

四、vue获取当前时间并格式化

在Vue.js中获取当前时间并格式化可以采用moment.js这个JavaScript日期库。moment.js提供了各种日期处理的方法，使用它可以非常方便地获取和格式化日期。在Vue.js中可以这样使用moment.js：

import Vue from 'vue'
import moment from 'moment'

Vue.filter('moment', function(value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss'
  return moment(value).format(formatString)
})

五、vue格式化日期

在Vue.js中，我们可以使用Vue.js的date-filter过滤器来格式化日期。以下是Vue.js中格式化日期的例子：

import Vue from 'vue'
import moment from 'moment'

Vue.filter('dateFormat', function (dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dateStr).format(pattern)
})

六、vscode vue格式化

在Visual Studio Code中，我们可以使用prettier插件来格式化Vue.js代码。以下是使用prettier格式化Vue.js代码的方法：

1、安装prettier插件；

2、在选项中搜索settings和Editor: Format 命令；

3、选择Workspace或User来编辑设置；

4、将”editor.formatOnSave”: true添加到settings.json文件中；

5、在Vue.js文件中按Ctrl + Shift + P 并输入格式代码即可。

七、vue代码格式化

在Vue.js中，我们可以使用ESLint来规范化我们的代码格式和语法。ESLint是一个基于JS的代码检查工具，通过为我们提供统一的代码风格规范解决了团队成员之间代码风格不统一的问题，从而提高了团队代码的合作效率和质量。

八、vue json格式化

在Vue.js中我们可以使用JSON.stringify()和JSON.parse()方法来处理JSON数据格式化。JSON.stringify()可以将JavaScript对象转为JSON字符串，JSON.parse()可以将JSON字符串转为JavaScript对象。以下是Vue.js格式化JSON数据的例子：

data() {
  return {
    user: {
      name: 'Luffy',
      age: 17,
      skills: ['rubber', 'strong', 'fighting']
    }
  }
},
computed: {
  userJson() {
    return JSON.stringify(this.user, null, 2)
  },
  userData() {
    return JSON.parse(this.userJson)
  }
}

九、vue输入框里面金额格式化

在Vue.js中，我们可以通过监听用户在输入框中输入的字符，实时格式化金额。以下是Vue.js实时格式化货币的例子：

computed: {
  formattedPrice: {
    get() {
      let price = this.price
      let arr = price.split('.')
      let first = arr[0].replace(/\D/g, '').replace(/^0+/,'') || '0'
      let second = arr[1] ? '.' + (arr[1].replace(/\D/g, '') + '00').substr(0, 2) : '.00'
      return first + second
    },
    set(value) {
      this.price = value.replace(',', '.').replace(/^0+/,'')
    }
  }
}

十、vue格式化代码快捷键选取

在Vue.js中，找到常用的操作，可以用快捷键来加速我们的代码开发。以下是Vue.js的常用快捷键：

1、在命令面板中输入’format’命令就可以格式化整个代码；

2、使用Ctrl + Shift + L 可以选中当前单词的所有实例；

3、使用Ctrl + Shift + Alt + Arrow Up/Down可以同时编辑多行代码。