Vue for 循环数据格式改变

Question

我有一些数据要发送给学生和他们的银行账户余额。在 vue 中，我使用 v-for 循环遍历数据并将其放入 table。

我遇到的问题是，当循环达到银行账户余额时，我不知道如何更改甲酸盐。我希望它在正确的位置与“，”合成并在前面放一个 $。

我制作了一个可以执行所有这些操作的过滤器，但我不知道如何将它仅应用于我数据中的 "bank" id 名称。

gridData: [
      { id: 1, first_name: 'fname1', last_name: 'lname1', student_number:'1111', bank:100.01},
      { id: 2, first_name: 'fname2', last_name: 'lname2', student_number:'2222', bank:100.02},
      { id: 3, first_name: 'fname3', last_name: 'lname3', student_number:'3333', bank:100.03},
      { id: 4, first_name: 'fname4', last_name: 'lname4', student_number:'4444', bank:100.04},
    ]

然后我用这两行添加所有数据。我还有其他一些功能，允许用户在搜索框中输入任何内容，它会根据搜索框中的内容进行过滤。

<tr v-for="entry in filteredData" :key="entry.id">
            <td v-for="key in columnID" :key="key.id"> {{entry[key]}}</td>

我添加的用于更改数据格式的过滤器如下所示：

  filters: {
capitalize: function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
},
toUSD: function (value) {
  if (typeof value !== "number") {
      return value;
  }
  var formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0
  });
  return formatter.format(value);
}

},

如果我把它改成：

<tr v-for="entry in filteredData" :key="entry.id">
        <td v-for="key in columnID" :key="key.id"> {{entry[key] | toUSD}}</td>

那么它显然适用于所有的输入键。我的问题是如何将该过滤器仅应用于 "bank" 输入键？

非常感谢任何帮助。

Answer 1

您可以在密钥上使用 v-if/else：

<td v-for="key in columnID" :key="key.id"> 
    <span v-if="key === 'bank'">{{entry[key] | toUSD}} </span>
    <span v-else> {{ entry[key] }} </span>
</td>

Vue for 循环数据格式改变

Vue for loop data format change

javascript

vue.js

vue-component

vuejs2

vue-filter