Javascript，Vue JS 显示值答案

【问题标题】：Javascript, Vue JS displaying valuesJavascript，Vue JS 显示值
【发布时间】：2017-10-26 15:53:52
【问题描述】：

这里是初学者
我在使用 Vue js 显示数据时遇到了一些问题。

我有 3 个数组。
我想显示，数组 1 值 [0] 和数组 2 值 [0] 和数组 3 值 [0]

数组示例：

tableDataSlackStart [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]
tableDataCurrentTurning [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]
tableDataSlackStop [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

显示日期

<div class="stuff">
        <div class="start">{{tableDataSlackStart}}</div>
        <div class="turn">{{tableDataCurrentTurning}}</div>
        <div class="stop">{{tableDataSlackStop}}</div>
</div>

目前我在每个 div 中都得到了完整的数组。

我希望数据显示这样的内容。

    <div class="stuff">
        <div class="start">{{tableDataSlackStart[0]}}</div>
        <div class="turn">{{tableDataCurrentTurning[0]}}</div>
        <div class="stop">{{tableDataSlackStop[0]}}</div>
</div>
<div class="stuff">
        <div class="start">{{tableDataSlackStart[1]}}</div>
        <div class="turn">{{tableDataCurrentTurning[1]}}</div>
        <div class="stop">{{tableDataSlackStop[1]}}</div>
</div>

不知道怎么实现，不用复制代码。

任何帮助将不胜感激。

【问题讨论】：

你是如何使用 Vue 的？
分享现场演示？

标签： javascript arrays vue.js

【解决方案1】：

为此，我会以不同的方式格式化数据：

tableData: [{
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }, {
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }, {
        slackStart: '',
        currentTurning: '',
        slackStop: ''
    }]

要格式化数据，你可以这样做

tableData = tableDataSlackStart.map(function (value, key) {
    return {
        slackStart: value,
        currentTurning: tableDataCurrentTurning[key] || "no Data",
        slackStop: tableDataSlackStop[key] || "no Data"
    };
});

这只有在数组长度相同并且 SlackStart 具有最多条目数时才能正常工作。

这将使您能够执行以下操作：

<div v-for="data in tableData">
    <div class="start">{{ data.slackStart }}</div>
    <div class="turn">{{ data.currentTurning }}</div>
    <div class="stop">{{ data.slackStop }}</div>
</div>

如果您能提供更多关于您如何使用 Vue 的信息，我可以提供更多指导。

【讨论】：

您能否举例说明如何将数组添加到 tableData 中。我以前遇到过很多麻烦。
@charmGeld 我似乎在您发表评论之前添加了这一点！祝你好运！

【解决方案2】：

它们的长度相同，你可以这样编码：

<div v-for="(data, index) in tableDataSlackStart" :key="index">
<div class="stop">{{ data }}</div>
<div class="start">{{ tableDataCurrentTurning[index] }}</div>
<div class="turn">{{ tableDataSlackStop[index] }}</div>

【讨论】：

【解决方案3】：

您可以通过像这样安排数据来轻松做到这一点

var tableDataSlackStart = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"] 

var tableDataCurrentTurning = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

var tableDataSlackStop = [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"]

 var arr = [
        tableDataSlackStart,
        tableDataCurrentTurning,
        tableDataSlackStop
      ];

  arr.forEach(data => console.log(data[0]));

【讨论】：