需求4：v-for迭代对象数组，输出价格大于50的马克杯。 编写代码

在Vue.js中，你可以使用`v-for`指令结合条件判断来实现这个需求。假设你有一个名为`mugCollection`的对象数组，每个对象都有`name`和`price`属性，你可以这样做：

<template>
  <ul>
    <li v-for="mug in mugCollection" :key="mug.name">
      {{ mug.name }} - {{ mug.price }}
      <!-- 使用v-if检查价格是否大于50 -->
      <span v-if="mug.price > 50"> (Price > 50)</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      mugCollection: [
        { name: 'Mug A', price: 30 },
        { name: 'Mug B', price: 60 },
        { name: 'Mug C', price: 70 },
        // 更多对象...
      ],
    };
  },
};
</script>

在这个模板中，只有价格大于50的马克杯会显示"(Price > 50)"。如果`mugCollection`中的价格没有符合条件的，相应的标记也不会显示。

相关问题

v-for迭代对象数组，输出价格大于50的马克杯

非常感谢您的提问。以下是代码示例：

<template>
<div>
<div v-for="item in items" :key="item.id" v-if="item.price > 50">
{{ item.name }} - {{ item.price }}
</div>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, name: '马克杯A', price: 30 },
{ id: 2, name: '马克杯B', price: 60 },
{ id: 3, name: '马克杯C', price: 80 },
],
};
},
};
</script>

希望这个代码示例能够帮到您！