Question

初学者在这里我在使用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>

我不知道如何实现它，而不需要复制代码。

任何帮助都将不胜感激。

Answer 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的更多信息，我可以提供更多指导。

Answer 2

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

<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>

Answer 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]));

Javascript，Vue JS显示值

3 个答案: