Vue.js 循环修改对象数组属性示例

<template>
  <div>
    <ul>
      <li v-for='(item, index) in items' :key='index'>
        {{ item.name }}
      </li>
    </ul>
    <button @click='updateItems'>更新属性</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', price: 10 },
        { name: 'Item 2', price: 20 },
        { name: 'Item 3', price: 30 }
      ]
    };
  },
  methods: {
    updateItems() {
      this.items.forEach(item => {
        item.price += 5; // 修改price属性
      });
    }
  }
};
</script>
<p>在上面的示例中，我们有一个包含对象的数组'items'，每个对象都有'name'和'price'属性。在'updateItems'方法中，我们使用'forEach'循环来遍历'items'数组，并修改每个对象的'price'属性。当我们点击&quot;更新属性&quot;按钮时，'updateItems'方法会被调用，从而更新'items'数组中所有对象的'price'属性。</p>