Question

请问我过去48小时一直试图解决这个问题，但仍然没有运气。我使用jquery autoNumeric / numeric插件来格式化数字，因此它以逗号分隔。我一直用jQuery做这个，它一直工作正常。我是Vue的新手，所以当我将它与vue一起使用时，我在** update（）**函数中初始化之后开始工作。但事情发生了，我有以下模型： {'success':1,totalIncome:49000,data:{[{'name':'john','income':'200'},{'name':'Sam','income':'500'}]}

我的HTML：

<div id="app">
     <span v-for="item in model.data">{{item.income}}</span>
     <span>{{model.totalIncome}}</span>
</div>

在我更新的钩子中的vue根实例中，我将autoNumeric初始化为：

Updated:function() {
      $('span'). autoNumeric('init') ;
}

但是从结果来看，只有 v-for 指令中的 span 标记被格式化，而另一个 span 标记则没有。我需要帮助。我究竟做错了什么？

Answer 1

首先，不要使用自动数字输出。它的主要目的是格式化输入，而不是输出。它有点过时了。 vue-autonumeric也用于输入。不要使用它们。

对于格式化输出，请使用accounting.js（http://openexchangerates.github.io/accounting.js/）。这是您更好的选择。它是实际的，小巧的独立库。并且不要使用更新的钩子，而是使用过滤器。

定义：

// This is global filter for all components,
// but you can define filters in components also
Vue.filter('euroFormat', function (value) {
  if (!value) return ''
  return accounting.formatMoney(value, "€", 2, ".", ",")
})

用法：

<!-- Min version from CDN -->
<script src="https://unpkg.com/accounting@0.4.1/accounting.min.js"></script>

<div id="app">
  <span v-for="item in model.data>
    {{ item.income | euroFormat }}
  </span>
  {{ model.totalIncome | euroFormat }}
</div>

完成。这很简单。

PS：如果您在键入时需要格式化输入值，也很简单：

＆＃13;

new Vue({
  el: '#app',
  data: {
    income: ''
  },
  filters: {
    formatted (value) {
      if (!value) return ''
      return accounting.formatMoney(value, "€", 2, ".", ",")
    }
  }
})

＆＃13;

[v-cloak] {
  display: none;
}

＆＃13;

<div id="app">
  <input v-model="income">
  <p>Your income is <span v-cloak>{{ income | formatted }}</span></p>
</div>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>
<script src="https://unpkg.com/accounting@0.4.1/accounting.min.js"></script>

＆＃13;

Answer 2

<强>更新

用于输出使用过滤器。 vue2-filters让事情变得轻松

导入：

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

用法：

{{ amount | currency }} // 12345 => $12,345.00

使用其他符号：

{{ amount | currency('£') }} // 12345 => £12,345.00

使用不同的小数位数：

{{ amount | currency('₽', 0) }} // 12345 => ₽12,345

混合jquery和vue的问题在于它们可能互相争斗以更新组件。考虑尽可能多地坚持使用Vue。

相反，使用以下插件的vue版本： https://github.com/autoNumeric/vue-autoNumeric

带有jQuery autoNumeric或数字插件的Vuejs - 仅列表中的数据（v-for）格式为

2 个答案: