From 26c8d5f33611b7638ad8b447fee5d2c2d39b83d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BB=BA?= <lfjsg@vip.qq.com>
Date: Wed, 13 Apr 2022 21:40:24 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\344\273\266\346\270\262\346\237\223.html" | 142 ++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 "\345\210\230\351\200\242\345\273\272/20220413/\347\273\204\344\273\266\346\270\262\346\237\223.html"
diff --git "a/\345\210\230\351\200\242\345\273\272/20220413/\347\273\204\344\273\266\346\270\262\346\237\223.html" "b/\345\210\230\351\200\242\345\273\272/20220413/\347\273\204\344\273\266\346\270\262\346\237\223.html"
new file mode 100644
index 0000000..209de36
--- /dev/null
+++ "b/\345\210\230\351\200\242\345\273\272/20220413/\347\273\204\344\273\266\346\270\262\346\237\223.html"
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>1</title>
+		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
+		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+	</head>
+
+	<style type="text/css">
+		body {
+			margin: 0;
+			padding: 0;
+		}
+
+		li {
+			list-style-type: none;
+			margin: auto;
+			border-bottom: 1px dashed #000;
+			height: auto;
+			width: auto;
+			padding: 10px;
+
+		}
+
+		.lb {
+			margin: auto;
+			border: 3px solid green;
+			padding: 20px;
+			width: 50%;
+		}
+
+		img {
+			height: 100px;
+			width: 100px;
+
+
+		}
+
+		.name {
+			display: block;
+			margin-top: 10px;
+			cursor: pointer;
+		}
+
+		.badge {
+			font-size: 12px;
+			background: #ff6670;
+			color: white !important;
+			padding: 5px 5px;
+			border-radius: 5px;
+			width: 22px;
+			height: 22px;
+			margin-right: 5px;
+		}
+
+		.fd {
+			height: 200px;
+			width: 200px;
+		}
+	</style>
+	<body>
+
+		<div class="lb">
+
+			<language v-for="(item,index) in arr" :arr="item" :index="index"></language>
+
+		</div>
+	</body>
+
+	<script type="text/javascript">
+		let language = {
+			data: function() {
+				return {
+					show: false,
+				}
+			},
+			props: ['arr', 'index'], //数组，对外暴露一个变量名
+
+			template: '<li> <img :src="arr.img" ><span v-on:click="show=!show" class="name">{{arr.name}}</span><span class="badge" title="热销商品">热</span><span class="badge" style="background-color: #67C23A;" title="保证">保</span><span class="badge" style="background-color: #409EFF;"title="自营">商</span>  <div v-if="show" id="myAlert" class="alert alert-success "><img class="fd" :src="arr.img2" ><br><h4 style="color: #16181B;">{{arr.name}}<br>{{arr.msg}}</h4></div> </li>',
+		}
+
+		let app = new Vue({
+			el: ".lb",
+			data: {
+				arr: [{
+						"name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+						"img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+						"msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+						"img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+
+					},
+
+					{
+						"name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+						"img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+						"msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+						"img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+					},
+					{
+						"name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+						"img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+						"msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+						"img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+					},
+					{
+						"name": "Apple iPhone 13 (A2634) 128GB 星光色 支持全网通 5G双卡双待 ios 蓝色 256GB",
+						"img": "https://gd2.alicdn.com/imgextra/i2/2534651412/O1CN01LNnGRD1MIjwtVxzf4_!!2534651412.png",
+						"msg": "每个ID、相似地址、名字仅限购一台，多次购买有权取消订单，敬请理解。",
+						"img2": "https://gd1.alicdn.com/imgextra/i1/2534651412/O1CN01OGqivg1MIjx30eQWU_!!2534651412.png",
+					},
+				],
+				showor: false
+			},
+
+
+
+			methods: {
+				add: function(index, event) {
+					let el = event.currentTarget;
+					this.name = el.innerText
+					this.msg = this.arr[index].msg
+
+					//添加json数据~
+					// let json = {
+					// 	"name": "ces",
+					// 	"img": "ces",
+					// 	"msg": "111"
+					// }
+					// this.arr.push(json)
+					// console.log(this.arr)
+
+				}
+			},
+			components: {
+				language
+			}
+		})
+	</script>
+</html>
-- 
Gitee

