v-for迭代对象数组编写马克杯

在Vue.js中，`v-for`指令常用于遍历对象数组并渲染模板。假设我们有一个名为`mugCollection`的对象数组，每个对象都有`name`和`color`属性，你可以这样编写HTML模板：

<template>
  <div id="mug-container">
    <ul>
      <li v-for="(mug, index) in mugCollection" :key="index">
        <p>Name: {{ mug.name }}</p>
        <p>Color: {{ mug.color }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mugCollection: [
        { name: 'Mug 1', color: 'Blue' },
        { name: 'Mug 2', color: 'Red' },
        { name: 'Mug 3', color: 'Green' }
      ]
    };
  }
};
</script>

在这个例子中，`v-for`会为`mugCollection`中的每个对象创建一个新的列表项，并绑定`name`和`color`值到对应的DOM元素上。`:key`属性用于给每个列表项唯一标识，避免Vue更新时出现问题。