自适应Vue购物车

最新推荐文章于 2023-11-30 15:10:49 发布

·Mr.zuo

最新推荐文章于 2023-11-30 15:10:49 发布

阅读量158

点赞数

分类专栏： vue vue计算属性 javascript 文章标签： Vue

本文链接：https://blog.csdn.net/zuomengjia/article/details/102806397

版权

本文介绍了如何使用Vue.js来创建一个自适应的购物车功能，涵盖了组件设计、响应式布局以及与后台交互的关键点。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车练习</title>
		<script src="../js/vue-2.6.9.min.js" type="text/javascript"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.demo{
				width: 700px;
				margin: 0 auto;
			}
			table{
				width: 700px;
				border-collapse:collapse;
				margin: 20px auto;
			}
			tr{
				text-align: center;
			}
			td,th{
				height: 60px;
			}
			.ul1{
				height: 300px;
				display: flex;
				justify-content: space-around;
			}
			.ul1>li{
				width: 24%;
				height: 100%;
			}
			.ul1>li>p{
				width: 100%;
				height: 30px;
			}
			.ul1>li>img{
				width: 100%;
				height: 75%;
			}
			.ul1>li>button{
				width: 100%;
				height: 30px;
				outline: none;
				border: none;
				cursor: pointer;
			}
			.ul1>li:hover button{
				background: #FFD700;
				color: blue;
			}
			.td1>p{
				float: right;
				margin-right: 15px;
			}
			.demo>p{
				font-size: 20px;
				text-align: center;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div class="demo" v-cloak>
			<p>购物车</p>
			<ul class="ul1">
				<li v-for="cangku of cangkus">
					<img :src&#