vue开发购物车，解决全选单选问题

最新推荐文章于 2025-06-16 21:18:19 发布

原创最新推荐文章于 2025-06-16 21:18:19 发布 · 7.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #checkbox

vue 专栏收录该内容

29 篇文章

订阅专栏

在Vue中，由于不能直接通过this获取checkbox的checked属性，而是使用v-model进行数据绑定来实现全选和单选效果。通过一个boolean类型的allChecked变量，结合handleChecked()函数处理点击事件，实现购物车商品的全选和反选。利用v-if和v-else控制购物车总价的显示与隐藏。详细代码和方法介绍可在提供的链接中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现全选单选，在vue中无法通过this获取input中的checkbox的checked属性，但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选，单选的效果。

大体内容如下：

主要是通过checkbox以及v-if v-else实现内容的隐藏与显示

当全选对应的checkbox为选中状态，在这里指的是：

注解：

(1)allChecked：被封装成一个boolean类型的值，当选中时被设置成true，反之为对立面。

(2)handleChecked()：是一个函数，用来处理触发事件，同时实现对应的效果，如改变子的checkbox的状态。

(3)一个比较巧妙的转换boolean数据对立面的方法：this.allChecked = !this.allChecked；

(4)购物车总价显示与否的实现方法：通过v-if与v-else来判断，前提也是有一个boolean类型的值作为逻辑控制的标志；

本方法的使用环境如下：

1、data的封装

data() {
			return {
				//全选
				allChecked:false,
				//总计一栏是否显示的标记
				displayMoney: false,
				//  	购物清单
				list: [{
					    checked:false,
						id: 1,
						name: '发动机',
						price: 180,
						count: 1,
						Stotal: 180
					},
					{
						checked:false,
						id: 2,
						name: '燃油机',
						price: 200,
						count: 1,
						Stotal: 200
					},
					{
						checked:false,
						id: 3,
						name: '滤清',
						price: 500,
						count: 1,
						Stotal: 500
					}
				]
			}

		},

2、html部分

<div id="" v-if="list.length">
			<table class="table_border">
				<thead>
					<tr class="tip">
						<th>全选<input type="checkbox" @click="handleChecked()" v-model="allChecked"/></th>
						<th>商品编号</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list">
						<td><input type="checkbox" v-model="item.checked"  name="all"/></td>
						<td>{{ index + 1}}</td>
						<td>{{ item.name }}</td>
						<td>￥{{ item.price }}</td>
						<td>
							<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
							<input type="text" v-model="item.count" readonly="readonly" />
							<button @click="handleAdd(index)">+</button>
						</td>
						<td>￥{{ item.Stotal }}</td>
						<td>
							<el-button @click="handleRemove(index)" type="danger" icon="el-icon-delete" circle></el-button>
						</td>
					</tr>
					<tr>
						<td colspan="4"></td>
						<td colspan="3">
							总价 ：￥
							<span v-if="displayMoney=true">{{totalPrice}}</span>
							<span v-else="displayMoney=false">0</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="" v-else>
			购物车为空
		</div>

3、核心方法部分

handleChecked: function(item) {
				//全选
				if(this.allChecked==false) {
					for(var i = 0; i < this.list.length; i++) {
						var item = this.list[i];
						item.checked = true;
					}
				} else {  //取消全选
					for(var i = 0; i < this.list.length; i++) {
                        var item = this.list[i];
						item.checked = false;
					}
				}
				this.allChecked = !this.allChecked;
			}

完整代码见：https://download.youkuaiyun.com/download/colourfultiger/10516616