使用数据绑定，属性绑定

在《购物车——删除功能练习》文档中，虽然主要介绍了如何通过`v-for`指令来渲染列表和利用`v-on`指令来绑定事件以实现删除功能，但同样可以结合数据绑定和属性绑定来增强组件的功能性和可维护性。

### 数据绑定
- **数据驱动视图**：Vue.js的核心原则之一是“数据驱动”。即，页面上的所有元素都与 Vue 实例的数据模型进行绑定，当数据发生变化时，视图会自动更新。
- **示例**：假设你有一个商品列表数组 `items`，每个商品对象包含名称（name）、价格（price）等属性，你可以直接在模板中使用这些属性：

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

### 属性绑定
- **动态属性**：使用 `v-bind` 指令可以将 HTML 元素的属性值绑定到 Vue 实例中的表达式或变量上。
- **示例**：为商品项添加一个 `data-id` 属性，以便于后续操作（如点击事件处理）：

  <button v-bind:data-id="item.id" @click="deleteItem">删除</button>

或者使用缩写形式：

  <button :data-id="item.id" @click="deleteItem">删除</button>

### 结合使用
- **综合示例**：在实际开发中，通常会同时使用数据绑定和属性绑定来构建更复杂的组件：

  <template>
    <div id="cart">
      <ul>
        <li v-for="item in items" :key="item.id">
          <span>{{ item.name }} - ¥{{ item.price }}</span>
          <button :data-id="item.id" @click="deleteItem">删除</button>
        </li>
      </ul>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: '苹果', price: 5 },
          { id: 2, name: '香蕉', price: 3 },
          { id: 3, name: '橙子', price: 4 }
        ]
      };
    },
    methods: {
      deleteItem(event) {
        const itemId = event.target.getAttribute('data-id');
        this.items = this.items.filter(item => item.id !== parseInt(itemId));
      }
    }
  };
  </script>

这样不仅能够实现基本的删除功能，还能使代码更加清晰、易于维护。