Vue.js Mall Purchase Selection interface

<!     DOCTYPE html>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:0Auto; 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 016px 28px;        } #type li {height:44px;        Color: #8a8a8a; Line-height:44px; } #type A {margin:0 12px 011px; Color: #000;        } #choose mark {position:relative; Display:inline-lock;        height:24px; Line-height:24px;        border:1px solid #28a5c4;        Color: #28a5c4; margin:12px 5px0;        Background:none; padding:0 30px 06px; 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:Brand, Index:-1, list: ["Apple", "Xiaomi", "Hammer", "Meizu", "Huawei", "Samsung", "OPPO", "vivo", "Le Vision", "360", "ZTE", "Sony"]}, {title:Size, list: ["3.0 inches or less", "3.0-3.9", "4.0-4.5", "4.6-4.9", "5.0-5.5", "6.0-inch"]}, {title:System, list: ["Android", "(", "Android", ")", "Apple", "(", "IOS", ")", "Microsoft", "(", "WindowsPhone", ")", "none", "other"]}, {title:Network, list: ["Unicom 3G", "Dual sim 4G", "Dual sim 4G", "Unicom 4G", "Telecom 4G", "Mobile 4G"]        }    ]    </script>Your choice:<!--<mark> Hammer <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: ' Apple ', 1:3.0} key value does not repeat the key value is the subscript for each row Idea: Use the object to save each row of the selected label, each row subscript as the key value needs to add an attribute to each row of data, the property is used to record the selected label*/        //need to process data        //item represents each object in data        //Item.index represents the newly added property and the value of the property is-1Data.foreach (Item= item.index=-1) Console.log (data); NewVue ({el:' #wrap ', data: {datalist:data, choose: {}}, methods: { Addchoosehandle:function(option, index, i) {Console.log (Option,index)//this adds properties to the object and does not respond                    //this.choose[index] = option;                    //This.option Object                    //index key value                    //option Value Value                     This. $set ( This. Choose,index,option)//Locate the row of the operation, and set the index of the data in this row to the subscript of the clicked label                     This. Datalist[index].index =i; }            }        })    </script></body>
 Vue.js Mall Purchase Selection interface