vue购物车实战

最新推荐文章于 2024-07-23 19:07:06 发布

流殇꧂

最新推荐文章于 2024-07-23 19:07:06 发布

阅读量653

点赞数 5

分类专栏： vue 文章标签：购物车实战 vue

本文链接：https://blog.youkuaiyun.com/weixin_68926017/article/details/136407742

版权

本文详细介绍了如何使用Vue.js构建一个包含选择、增减操作的水果购物车应用，涉及数据绑定、列表渲染、方法处理以及本地存储功能。

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

1.引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2.设置高亮部分的样式

	<style> 
	   table tr{
		  text-align: center;
	   }
	   .skyblue{
		   background-color: skyblue;
	   }
	</style>

3.设置body的基本样式

<div id="app" >  
		<table border="1px solid black" style="width:500px;" >
			<thead>
				<tr >
					<td>选中</td>
					<td>图片</td>
					<td>单价</td>
					<td>个数</td>
					<td>小计</td>
					<td>操作</td>
				</tr> 
			</thead>	
			
			<tbody v-if="list.length>0">
			    <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}">
				<td><input type="checkbox" v-model="item.isCheck"></td> 
				<td>{
   {item.name}}</td>
				<td>{
   {item.price}}</td>
				<td>
				<button :disabled="item.num<=1" @click="sub(item.id)">-</button>
				{
   {item.num}}
				<button @click="add(item.id)">+</button></td>
				<td>{
   {item.price*item.num}}</td>
				<td> <button @click="del(item.id)">del</button> </td>
				</tr

最低0.47元/天解锁文章