Vue2.0+Vue-CLI：全选/单选与总价计算实战

"一个使用Vue 2.0和Vue CLI的简单示例，展示了如何实现全选、单选功能，并动态计算所选商品的总价格。这个实例代码只有126行，适用于需要在列表中进行选择和计算总价的场景。" 在Vue 2.0中，`vue-cli`是一个强大的脚手架工具，用于快速搭建Vue.js项目。在这个实例中，我们看到了如何在Vue组件中处理全选和单选的功能，以及如何实时计算选中商品的总价。关键知识点包括： 1. **模板语法**：`<template>`部分定义了HTML结构，包含了一个表格，每个表格行(`<tr>`)代表一个商品，其中包含一个可选的复选框(`<input type="checkbox">`)。 2. **数据绑定**：使用`v-model`指令将数据绑定到视图。`checkAll`是全选状态的标志，`checked`数组保存所有选中的商品ID，`checkedCount`表示选中商品的数量。 3. **v-for循环**：`v-for`用于遍历`lists`数组，`item`是当前项，`$index`是当前项的索引。每个商品都有自己的`checked`属性来表示是否被选中。 4. **条件渲染**：`v-show`指令根据条件决定元素是否显示，这里用来显示“我被选中”的文字。 5. **事件监听**：`@click`监听复选框的点击事件，调用`currClick`方法处理单选操作。 6. **计算属性**：`computed`对象定义了两个计算属性。`totalMoney`用于计算总价，遍历`totalPrice`数组并求和。`checkAll`是一个可获取和设置的计算属性，用于实现全选功能。 7. **方法**：`currClick`方法处理单个商品的选中状态改变，更新`checked`数组和`checkedCount`。 8. **数据对象**：`data`函数返回一个对象，包含`checked`、`totalPrice`和`lists`。`lists`是一个商品列表，每个商品包含`productName`（产品名称）、`price`（价格）、`count`（数量）和`id`（唯一标识）。 9. **双向数据绑定**：`v-model`将商品ID绑定到`checked`数组，使得用户在界面上的交互可以即时反映到数据模型上。 10. **计算属性的setter和getter**：`checkAll`的getter函数返回`checked`数组长度与`lists`长度相等时的结果，setter函数未在给出的代码中定义，但通常会处理全选和反选所有商品的情况。 通过以上这些功能，这个简单的实例实现了在Vue应用中动态地管理商品的选择状态，并实时更新总价，为实际开发提供了参考。在实际项目中，可以根据需要扩展这个例子，比如添加分页、过滤和排序等功能。