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

1 下载量 153 浏览量 更新于2024-08-31 收藏 49KB PDF 举报
"一个使用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应用中动态地管理商品的选择状态,并实时更新总价,为实际开发提供了参考。在实际项目中,可以根据需要扩展这个例子,比如添加分页、过滤和排序等功能。