vue商品规格vue商品展示

vue商品规格 vue商品展示

在 Vue.js 中，商品规格可以通过以下方式进行展示：

使用 v-for 指令遍历数组或对象，并使用 v-bind:key 属性为每个元素添加唯一的标识符。

<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: "规格1", description: "描述1" },        { id: 2, name: "规格2", description: "描述2" },        // ...      ],    };  },};</script>

使用 v-for 指令遍历数组或对象，并使用 v-bind:key 属性为每个元素添加唯一的标识符。

<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: "规格1", description: "描述1" },        { id: 2, name: "规格2", description: "描述2" },        // ...      ],    };  },};</script>

使用计算属性和 watch 监听属性变化，并在模板中显示更新后的值。

<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: "规格1", description: "描述1" },        { id: 2, name: "规格2", description: "描述2" },        // ...      ],    };  },  computed: {    updatedProductSpecs() {      return this.productSpecs.map((item, index) => ({        ...item,        updatedName: item.name + " (已更新)",      }));    },  },  watch: {    productSpecs: {      handler() {        this.updatedProductSpecs();      },      deep: true,    },  },};</script>