Question

我正在听Adam Wathan的播客，他和Chris Fritz（Vue核心团队的成员）正在讨论计算属性以及如何考虑何时使用方法执行任务或计算属性的好方法，如果你要“返回”一个值，你应该使用一个计算属性。

现在我对使用计算属性是否应该接近这种特殊情况感到有些困惑。

我在下面的是一个Employees List组件，我在其中获取数据库中所有员工的列表，并使用bootstrap-vue将它们显示在表中。曲线球是工资存储为整数，我想在显示它们时用逗号格式化它们。正如你所看到的，我添加了一个肮脏的黑客来做到这一点，这绝对不是正确的方法。所以我想知道理想的方法是什么？

<template>
    <div>
        <h3>All Employees</h3>
        <b-table striped hover :items="formattedEmployees"></b-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                employees: []
            }
        },

        methods: {
            getEmployees() {
                axios.get('/api/employees')
                    .then(response => {
                        this.employees = response.data
                        this.employees.forEach(function (employee) {
                            employee.salary = '$ ' + employee.salary.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                        })
                    })
            }
        },

        created() {
            this.getEmployees()

            this.$root.$on('employee-added', data => {
                this.employees.push(data)
            })
        }
    }
</script>

哦，在底部，您可以看到，在创建此组件时，我正在侦听通过Add Employee组件添加员工时触发的全局事件。这有点坏了 - 它添加了第一个新员工，但当我开始输入以添加另一个员工时，列表中的第一个员工姓名会随着我的输入而改变。

感谢您提供的任何见解。

Answer 1

只需使用Number.prototype.toLocaleString即可。它是在JavaScript 1.5（1999年推出）中实现的，因此它主要支持主流浏览器。

＆＃13;

var num = 34523459
console.log('$ ' + num.toLocaleString())

＆＃13;

我应该在这里使用计算属性吗？

1 个答案: