Java 小白 vue 购物车代码

最新推荐文章于 2024-03-30 10:17:30 发布

Lin_bai_

最新推荐文章于 2024-03-30 10:17:30 发布

阅读量219

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/Lin_bai_/article/details/112780813

版权

本文主要介绍了一位Java新手如何使用Vue.js框架来实现一个简单的购物车功能。通过阅读，读者将了解Vue组件化开发的概念，以及如何进行状态管理和数据绑定。文章深入浅出地讲解了Vue实例、组件、计算属性和监听器的用法，并结合实际的购物车场景，演示了如何动态增删商品、计算总价等操作。

摘要由CSDN通过智能技术生成

<template>
	<div class="mainCart">
		<div class="top_main_width">
			<a href="#"><i class="el-icon-caret-left">继续购物</i></a>
			<span class="car1">您的购物车(3)</span>
		</div>
		<div class="group_list_nav clear">
			<div class="child">派对必备&nbsp;欢喜加倍</div>
			<span class="child1">加购超值组合专享礼</span>
			<a href="#">点击选购</a>
		</div>
		<div class="goods_list">
			<div class="goods_list1" :key="index" v-for="(v,index) in productList">
				<div class="check1"><input type="checkbox" v-model="v.select" :value="1"></div>
				<div class="goods_list1_img"> <img :src="require('./'+v.pro_img)" /></div><!-- //图片 -->
				<div class="p_info_f_left">
					<div class="p_detail_f_left">
						<h2 class="no_wrap">{
   {
   v.pro_name}}</h2><!-- //名字 -->
						<h3 class="no_wrap1">{
   {
   v.pro_purity}}</h3><!-- //规格 -->
						<div class="bottom_wrap">
							<span class="no_wrap2"><small>￥单价{
   {
   v.pro_price.toFixed(2)}}</small></span><!-- //价格 -->
							<div class="birthday_card">
								<el-select v-model="value" class="birthday_card1" style="height:50px">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<i><input type="checkbox"><span>切分25份</span></i>
						</div>
					</div>
					<div class="p_edit_f_right">
						<div class="p_edit_f_right_top"