huanggr
使用Vue制作的商品筛选,可以自定的的进行选择，使用Vue制作的商品筛选,可以自定的的进行选择，使用Vue制作的商品筛选,可以自定的的进行选择
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> span { padding: 3px; margin: 3px; } .demo { width: 500px; height: 200px; margin: 150px auto; border: 1px solid #ccc; } .current { background: #ccc; } .red { background: red; } </style> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <body> <div id="app"> <div class="demo"> <p>当前的选择是 <span class="current" v-for='item,key in choose' > {{item}} <i @click="removeHandle(key)">x</i> </span> </p> <ul> <li v-for='item,index in datalist'> {{item.title}} <span v-for="option,i in item.list" @click="addChooseHandle(option,index,i)" :class='{red:item.index === i}' > {{option}} </span> </li> </ul> </div> </div> </body> </html> <script type="text/javascript"> let data = [ { title: '品牌', list: ['小米', '苹果', '魅族', '三星', '华为'] }, { title: '尺寸', list: ['5.1', '5.5', '5.7', '5.9', '5.2'] }, { title: '系统', list: ['windows', 'ios', 'andon', 'linux', 'xp'] } ]; //使用foreach添加data data.forEach(item => item.index = -1); //查看data中的数据 console.log(data); new Vue({ el: "#app", data: { datalist: data, choose: { } }, methods: { addChooseHandle(option, index, i) { //使用set添加对象 this.$set(this.choose, index, option); console.log(this.choose); //找到操作的一行，把这一行的数据中的index，设置为 this.datalist[index].index = i; }, removeHandle(key){ console.log(key); this.$delete(this.choose,key); this.datalist[key].index=-1; } } }) </script> |
7