body {background-color: #c3c3c3}

Vue开发 购物网站选项卡功能 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css" />
		<script src="js/vue.js"></script>
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			dd,
			dt {
				display: inline-block;cursor: pointer;
			}
             dl{
				 background: darkgrey;
			 }
			dt {
				color: #8c8c96;
			}

			dd {
				margin: 0 0.5rem
			}

			.tit {
				color: #8c8c96
			}
           .active{
			   color: white;
		   }
			#app {
			margin: 0 auto;width: 800px;background: #8c8c96;
			}

			.tiaojian {
				color: red;
			}

			.tab {
				margin-top: 1rem;
			}
			.tab span{background: red;color:white;margin-right:1rem;padding: 0.2rem 0.5rem;}
		</style>
	</head>
	<body>
		<div id="app">
			<dl v-for="(itemgood,goodindex) in good":key="itemgood.id">
				<dt> {{itemgood.title}}</dt>
				<dd v-for="(item,listindex) in itemgood.list" :key="item"
				 @click="plus(goodindex,item,listindex,itemgood)"
				  :class="{tiaojian:itemgood.cn===listindex}"	> {{item}}</dd>
			</dl>
			<div class="tab">
				<p>已选择条件 
				<span v-if="!Object.keys(selectdata).length">未选择条件</span>
				<span v-for="(item,key) in selectdata" @click="del(key)">{{item}}</span>
				</p>

			</div>
		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
				 mm:'',
					selectdata:{
						// 0:123,
						// 1:456
					},
					good: [{
							title: "品牌",
							list: ["华为", "苹果", "联想", "苹果1", "联想2", "苹果3", "联想4", "苹果5", "联想6"],
							id:0
						},
						{
							title: "价格",
							list: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
							id:1
						},
						{
							title: "尺寸",
							list: ["11", "12", "13", "15", "17", "19", "21", "25", "27"],
							id:2
						}
					]
				},
				methods:{
					plus(i,y,listindex,itemgood){
						this.$set(this.selectdata,i,y)
						itemgood.cn=listindex
						
						console.log(itemgood)
						
					},
					del(i){
						console.log(i)
						this.$delete(this.selectdata,i) //删除第几条信息
					}
				}
			})
		</script>
	</body>
</html>

　　

posted @ 2023-11-26 16:10  最美胡萝卜  阅读(47)  评论(0)    收藏  举报
body {background-color: #c3c3c3}