VueJS:如何在移动大小上隐藏一些数据表列

/* 定义一个移动设备的媒体查询 */
@media only screen and (max-width: 600px) {
  .hide-on-mobile {
    display: none;
  }
}

<table>
  <tr>
    <th>Name</th>
    <th class="hide-on-mobile">Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td class="hide-on-mobile">30</td>
    <td>New York</td>
  </tr>
  <!-- 其他表格行 -->
</table>

<th v-show="!isMobile">Age</th>
<!-- 或 -->
<th v-if="!isMobile">Age</th>

export default {
  data() {
    return {
      isMobile: false // 默认为非移动设备
    };
  },
  mounted() {
    // 判断设备宽度是否小于 600px，如果是则认为是移动设备
    this.isMobile = window.innerWidth < 600;
  }
}