vue学习笔记(1)

最新推荐文章于 2023-07-26 10:51:20 发布

「已注销」

最新推荐文章于 2023-07-26 10:51:20 发布

阅读量207

点赞数

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/nerdcfl/article/details/89939689

版权

前端学习专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要介绍了使用Vue.js构建一个简单的购物车应用的过程，包括HTML、CSS和JavaScript的实现细节。

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

一个购物车应用

结果展示
在这里插入图片描述
html源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Vue 实例</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="app" v-cloak>
			<template v-if="list.length">
				<table>
					<thead>
						<tr>
							<th></th>
							<th>商品名称</th>
							<th>商品单价</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in list">
							<td>{{index+1}}</td>
							<td>{{item.name}}</td>
							<td>{{item.price}}</td>
							<td>
								<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
								{{item.count}}
								<button @click="handleAdd(index)">+</button>
							</td>
							<td>
								<button @click="handleRemove(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div>总价：￥{{totalPrice}}</div>
			</template>
			<div v-else>购物车为空</div>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script src="index.js"></script>
	</body>
</html>

css源码

[v-cloak]{
	display: none;
}
table{
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}
th, td{
	padding: 8px,16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}
th{
	background: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
	white-space: nowrap;
}

js代码

var app = new Vue({
	el:'#app',
	data:{
		list:[
			{
				id:1,
				name:'iPhone7',
				price:8888,
				count:1
			},
			{
				id:2,
				name:'Mac',
				price:18888,
				count:1
			},
			{
				id:3,
				name:'iPad',
				price:5888,
				count:1
			},
		]
	},
	computed:{
		totalPrice: function(){
			var total = 0;
			for(var i=0;i<this.list.length;i++){
				var item = this.list[i];
				total += item.price * item.count;
			}
			return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
		}
	},
	methods:{
		handleReduce:function(index){
			if(this.list[index].count === 1) return;
			this.list[index].count--;
		},
		handleAdd:function(index){
			this.list[index].count++;
		},
		handleRemove:function(index){
			if(this.list[index].count === 1) return;
			this.list.splice(index ,1);
		}
	}
})