在 Vue.js 中，商品規(guī)格可以通過以下方式進(jìn)行展示：

1. 使用 v-for 指令遍歷數(shù)組或?qū)ο螅⑹褂?v-bind:key 屬性為每個(gè)元素添加唯一的標(biāo)識符。

<template>
  <div>
    <ul>
      <li v-for="item in productSpecs" :key="item.id">
        {{ item.name }} - {{ item.description }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productSpecs: [
        { id: 1, name: '規(guī)格1', description: '描述1' },
        { id: 2, name: '規(guī)格2', description: '描述2' },
        // ...
      ],
    };
  },
};
</script>

1. 使用 v-for 指令遍歷數(shù)組或?qū)ο螅⑹褂?v-bind:key 屬性為每個(gè)元素添加唯一的標(biāo)識符。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in productSpecs" :key="index">{{ item.name }} - {{ item.description }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productSpecs: [
        { id: 1, name: '規(guī)格1', description: '描述1' },
        { id: 2, name: '規(guī)格2', description: '描述2' },
        // ...
      ],
    };
  },
};
</script>

1. 使用計(jì)算屬性和 watch 監(jiān)聽屬性變化，并在模板中顯示更新后的值。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in productSpecs" :key="index">{{ item.name }} - {{ item.description }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productSpecs: [
        { id: 1, name: '規(guī)格1', description: '描述1' },
        { id: 2, name: '規(guī)格2', description: '描述2' },
        // ...
      ],
    };
  },
  computed: {
    updatedProductSpecs() {
      return this.productSpecs.map((item, index) => ({
        ...item,
        updatedName: item.name + ' (已更新)',
      }));
    },
  },
  watch: {
    productSpecs: {
      handler() {
        this.updatedProductSpecs();
      },
      deep: true,
    },
  },
};
</script>