<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???body { ???????font-size: 14px; ???????font-family: "Lantinghei SC Extralight", Arial; ???} ???ul { ???????padding: 0; ???????margin: 0; ???????list-style: none; ???} ???a { ???????text-decoration: none; ???} ???img { ???????vertical-align: top; ???} ???#wrap { ???????width: 760px; ???????height: 260px; ???????margin: 100px auto; ???????padding: 145px 120px 95px; ???????background: url(img/bg.jpg) no-repeat 0 0; ???} ???#section { ???????width: 760px; ???????height: 260px; ???????-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, .2); ???????box-shadow: 0px 0px 4px rgba(0, 0, 0, .2); ???} ???#choose { ???????width: 760px; ???????height: 50px; ???????margin: 0 auto; ???????background: url(img/nav_bg.png) no-repeat 0 0; ???????line-height: 50px; ???????text-indent: 21px; ???} ???#type { ???????width: 100%; ???????height: 210px; ???????background: url(img/type_bg.png) no-repeat 0 0; ???????padding: 17px 0 16px 28px; ???} ???#type li { ???????height: 44px; ???????color: #8a8a8a; ???????line-height: 44px; ???} ???#type a { ???????margin: 0 12px 0 11px; ???????color: #000; ???} ???#choose mark { ???????position: relative; ???????display: inline-block; ???????height: 24px; ???????line-height: 24px; ???????border: 1px solid #28a5c4; ???????color: #28a5c4; ???????margin: 12px 5px 0; ???????background: none; ???????padding: 0 30px 0 6px; ???????text-indent: 0; ???} ???#choose mark a { ???????position: absolute; ???????top: 3px; ???????right: 2px; ???????display: inline-block; ???????width: 18px; ???????height: 18px; ???????background: #28a5c4; ???????color: #fff; ???????line-height: 18px; ???????font-size: 16px; ???????text-align: center; ???} ???.active { ???????background: rgb(40, 165, 196); ???} ???</style> ???<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ???<script type="text/javascript"> ???let data = [{ ???????????title: ‘品牌‘, ???????????index: -1, ???????????list: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", "索尼"] ???????}, ???????{ ???????????title: ‘尺寸‘, ???????????list: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"] ???????}, ???????{ ???????????title: ‘系统‘, ???????????list: ["安卓", "(", "Android", ")", "苹果", "(", "IOS", ")", "微软", "(", "WindowsPhone", ")", "无", "其他"] ???????}, ???????{ ???????????title: ‘网络‘, ???????????list: ["联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G"] ???????} ???] ???</script></head><body> ???<div id="wrap"> ???????<section id="section"> ???????????<nav id="choose"> ???????????????你的选择: ???????????????<!-- <mark>锤子<a href="javascript:;">x</a></mark> --> ???????????????<mark v-for="item in choose"> ???????????????????{{item}} ???????????????????<a href="javascript:;">x</a> ???????????????</mark> ???????????</nav> ???????????<ul id="type"> ???????????????<li v-for="item,index in dataList"> ???????????????????{{item.title}}: ???????????????????<a ????????????????????????href="javascript:;" ???????????????????????v-for="option,i in item.list" ???????????????????????v-bind:class="{active: item.index === i}" ???????????????????????@click="addChooseHandle(option,index,i)" ???????????????????>{{option}}</a> ???????????????</li> ???????????</ul> ???????</section> ???</div> ???<script type="text/javascript"> ???????/* ???????????{ ???????????????0:‘苹果‘, ???????????????1:3.0 ???????????} ???????????key值不重复 ???????????key值就是每一行的下标 ???????????思路:用对象来存每一行选中的标签,把每一行下标作为key值 ???????????需要给数据的每一行添加一个属性,属性用来记录选中的标签 ???????*/ ???????//需要处理data ???????//item表示data里面的每一个对象 ???????//item.index表示新添的属性并且属性的值为-1 ???????data.forEach(item => item.index= -1) ???????console.log(data); ???????new Vue({ ???????????el:‘#wrap‘, ???????????data: { ???????????????dataList: data, ???????????????choose: {} ???????????}, ???????????methods: { ???????????????addChooseHandle: function(option, index, i){ ???????????????????console.log(option,index) ???????????????????//这样给对象添加属性并不会响应 ???????????????????//this.choose[index] = option; ???????????????????//this.option ??对象 ???????????????????//index ????????key值 ???????????????????//option ???????value值 ???????????????????this.$set(this.choose,index,option) ???????????????????//找到操作的一行,把这一行的数据中的index,设置为点击的标签的下标 ???????????????????this.dataList[index].index = i; ???????????????} ???????????} ???????}) ???</script></body></html>vue.js商城购买选择界面
原文地址：https://www.cnblogs.com/JeneryYang/p/9146082.html