vue前端开发 同一页面同一种内容，PC端用表格呈现数据，移动端用卡片呈现数据，要如何实现

可以通过媒体查询来实现页面在不同设备上的不同呈现方式。具体实现步骤如下：

1. 在页面中添加两种不同的展示方式，一种是表格，另一种是卡片。

2. 使用CSS媒体查询来检测设备的屏幕宽度，当屏幕宽度小于某个阈值时，切换到卡片展示方式，否则使用表格展示方式。

3. 在CSS中使用@media指令，设置不同屏幕宽度下的样式。

示例代码如下：

/* PC端表格展示 */
.table-container {
  display: block; /* 默认为块级元素 */
}

/* 移动端卡片展示 */
@media (max-width: 767px) {
  .table-container {
    display: none; /* 隐藏表格 */
  }

  .card-container {
    display: block; /* 显示卡片 */
  }
}

其中，`max-width: 767px`指的是屏幕宽度小于767px时，应用媒体查询样式。

在HTML中，可以将表格和卡片容器都添加到页面中，然后根据设备屏幕宽度的不同，通过CSS来控制展示方式。示例代码如下：

<!-- 表格容器 -->
<div class="table-container">
  <table>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>商品1</td>
      <td>10</td>
      <td>100元</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>20</td>
      <td>200元</td>
    </tr>
  </table>
</div>

<!-- 卡片容器 -->
<div class="card-container">
  <div class="card">
    <div class="card-header">商品1</div>
    <div class="card-body">
      <div>数量：10</div>
      <div>价格：100元</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">商品2</div>
    <div class="card-body">
      <div>数量：20</div>
      <div>价格：200元</div>
    </div>
  </div>
</div>

通过上述实现，就可以在同一页面中，在PC端使用表格展示数据，在移动端使用卡片展示数据。