如何使用vue 显示,分隔符平分行的数据?

数据在数据库是如下存储的,请问各位老师,如果读取出来,期望按如下表格显示,能使用html vue 和 js 实现吗?

原始数据按分隔符分行显示:

第1条是:
1-6:0.4
7-10:0.5
11-20:0.5
21-30:0.7
40:1.0
50:1.2
60:1.4

第2条是:
1-6:0.5
7-10:0.5
11-20:0.5
21-30:0.7
40:1.1
50:1.2
60:1.4

期望展示的表格如下:

Attrnuation 1-6dB 7-10dB 11-20dB 21-30dB 40dB 50dB 60dB
Accuracy 0.4dB 0.5dB 0.5dB 0.7dB 1.0dB 1.2dB 1.4dB
Attrnuation 1-6dB 7-10dB 11-20dB 21-30dB 40dB 50dB 60dB
Accuracy 0.5dB 0.5dB 0.5dB 0.7dB 1.1dB 1.2dB 1.4dB

分析如下:

第一步,html 结构需要一个表 table 标签,显示行的标签 tr ,单元格标签 td

第一步,在vue中使用js数组来定义这些原始数据

items: [
          [
            '1-6:0.4',
            '7-10:0.5',
            '11-20:0.5',
            '21-30:0.7',
            '40:1.0',
            '50:1.2',
            '60:1.4'
          ],
          [
            '1-6:0.5',
            '7-10:0.5',
            '11-20:0.5',
            '21-30:0.7',
            '40:1.1',
            '50:1.2',
            '60:1.4'
          ]
        ]

如何拆分中间有:(冒号)的分隔符呢?在js中可以使用字符串split() 方法来实现。

第三步,vue v-for 循环遍历数组即可实现功能。

vue 的 实现的完整代码如下:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>vue v-for 循环遍历数组 xinbiancheng.cn</title>
  <style>
    table,
    tr,
    td {
      border: 1px solid red;
      border-collapse: collapse;
    }

    td {
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <table v-for="(item,index) in items">
      <tr>
        <td>Attrnuation</td>
        <td v-for="(m_item,i) in item">{{m_item.split(":")[0]}}dB</td>
      </tr>
      <tr>
        <td>Accuracy</td>
        <td v-for="(m_item,i) in item">{{m_item.split(":")[1]}}dB</td>
      </tr>
    </table>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        items: [
          [
            '1-6:0.4',
            '7-10:0.5',
            '11-20:0.5',
            '21-30:0.7',
            '40:1.0',
            '50:1.2',
            '60:1.4'
          ],
          [
            '1-6:0.5',
            '7-10:0.5',
            '11-20:0.5',
            '21-30:0.7',
            '40:1.1',
            '50:1.2',
            '60:1.4'
          ]
        ]
      }
    })
  </script>
</body>

</html>

最后使用 style 定义一下 css 的样式,使表格更加好看,这个大家自己去调试。