vue实现单选和多选功能
程序员文章站
2022-11-25 12:18:34
本文实例为大家分享了vue实现单选和多选功能的具体代码,供大家参考,具体内容如下复制代码
本文实例为大家分享了vue实现单选和多选功能的具体代码,供大家参考,具体内容如下复制代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta> <title>document</title> <script src="../vue.js"></script> <style> ul, li { list-style-type: none; } * { margin: 0; padding: 0; } .border-1px { position: relative; } .border-1px:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(7, 17, 27, .1); content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px::after { -webkit-transform: scaley(0.7); transform: scaley(0.7); } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px ::after { -webkit-transform: scaley(0.5); transform: scaley(0.5); } } #example { margin: 20px; } h3 { font-size: 26px; margin-left: 20px; height: 60px; } .self-radio { display: none; } .self-radio + label { -webkit-appearance: none; background-color: #fff; border: 1px solid #aaa; border-radius: 50px; display: inline-block; position: relative; width: 30px; height: 30px; box-sizing: border-box; } .self-radio:checked + label { border: 1px #47d9bf solid; } .self-radio:checked + label:after { position: absolute; top: 9px; left: 9px; content: ' '; width: 10px; height: 10px; border-radius: 50px; background: #47d9bf; box-shadow: 0px 0px 5px 0px #47d9bf; } .check-area { display: inline-block; width: 400px; padding: 12px 20px; border: 1px solid #aaa; border-top-left-radius: 4px; border-top-right-radius: 4px; } li { height: 60px; } li .self-radio + label { vertical-align: middle; } li span { margin-left: 20px; display: inline-block; line-height: 60px; font-size: 22px; } p { height: 60px; line-height: 60px; margin-left: 20px; } p span { color: #f00; } .btn { margin: 20px auto; width: 100%; text-align: center; } .btn button { width: 120px; height: 40px; line-height: 30px; font-size: 16px; color: #fff; background: #47d9bf; border: 1px #23d5b6 solid; border-radius: 6px; text-align: center; outline: none; } .btn button:hover { background: #23d5b6; } </style> </head> <body> <div id="example"> <h3>单选按钮</h3> <div class="check-area" v-show="items.length!=0"> <ul> <li class="border-1px" v-for="(item,index) in items"> <input class="self-radio" type="radio" :id="'radio-'+item.id" :data-id="'food-'+item.id" name="radio" :checked="index==0" :value="item.value" v-model="checkvalue"> <label :for="'radio-'+item.id" @click="setcheckvalue(item)"></label> <span>{{item.value}}</span> </li> </ul> <p>您选择了:<span>{{checkvalue}}</span></p> <div class="btn"> <button @click="showcheck(checkid)">按钮</button> <span>{{checkid}}</span> </div> </div> </div> <script> var itemdata = [{id: '20170811001', value: '香蕉'}, {id: '20170811002', value: '苹果'}, { id: '20170811003', value: '梨子' }, {id: '20170811004', value: '葡萄'}] //itemdata = []; var vm = new vue({ el: '#example', data: { items: '', checkvalue: '', checkid: '' }, methods: { init: function () { }, initdata: function () { var self = this; self.items = itemdata; if (itemdata.length != 0) { self.checkvalue = self.items[0].value; self.checkid = 'food-' + self.items[0].id } }, setcheckvalue: function (item) { this.checkid = 'food-' + item.id; } , showcheck: function () { console.log(this.checkid) } }, mounted: function () { this.initdata(); } }) </script> </body> </html>
vue实现多选功能
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta> <title>document</title> <script src="../vue.js"></script> <style> ul, li { list-style-type: none; } * { margin: 0; padding: 0; } .border-1px { position: relative; } .border-1px:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(7, 17, 27, .1); content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px::after { -webkit-transform: scaley(0.7); transform: scaley(0.7); } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px ::after { -webkit-transform: scaley(0.5); transform: scaley(0.5); } } #example { margin: 20px; } h3 { font-size: 26px; margin-left: 20px; height: 60px; } .self-checkbox { display: none; } .self-checkbox + label { margin-top: 16px; -webkit-appearance: none; background-color: #fff; border: 2px solid #aaa; border-radius: 5px; display: inline-block; position: relative; width: 30px; height: 30px; box-sizing: border-box; vertical-align: top; } .self-checkbox:checked + label { border: 2px #47d9bf solid; } .self-checkbox:checked + label:after { display: inline-block; text-align: center; content: '√'; width: 100%; height: 30px; line-height: 26px; color: #47d9bf; font-size: 18px; text-shadow: 0px 0px 5px #47d9bf; } .check-area { display: inline-block; width: 400px; padding: 12px 20px; border: 1px solid #aaa; border-top-left-radius: 4px; border-top-right-radius: 4px; } li { height: 60px; } li .self-radio + label { vertical-align: middle; } li span { margin-left: 20px; display: inline-block; line-height: 60px; font-size: 22px; } p { height: 60px; line-height: 60px; margin-left: 20px; } p span { color: #f00; } .btn { margin: 20px auto; width: 100%; text-align: center; } .btn button { width: 120px; height: 40px; line-height: 30px; font-size: 16px; color: #fff; background: #47d9bf; border: 1px #23d5b6 solid; border-radius: 6px; text-align: center; outline: none; } .btn button:hover { background: #23d5b6; } </style> </head> <body> <div id="example"> <h3>多选按钮</h3> <div class="check-area" v-show="items.length!=0"> <ul> <li class="border-1px" v-for="(item,index) in items"> <input class="self-checkbox" type="checkbox" :id="'checkbox-'+item.id" :data-id="'food-'+item.id" name="radio" :value="item.value" v-model="checkvalues" @click="setcheckvalue($event,item)"> <label :for="'checkbox-'+item.id"></label> <span>{{item.value}}</span> </li> </ul> <p>您选择了:<span v-show="checkvalues.length">{{filtercheckvalues}}</span></p> <div class="btn"> <button @click="showcheck(checkids)">按钮</button> <span v-show="checkids.length">{{checkids}}</span> </div> </div> </div> <script> var itemdata = [{id: '20170811001', value: '香蕉'}, {id: '20170811002', value: '苹果'}, { id: '20170811003', value: '梨子' }, {id: '20170811004', value: '葡萄'}] //itemdata = []; var vm = new vue({ el: '#example', data: { items: '', checkvalues: [], checkids: [] }, computed: { filtercheckvalues: function () { var value = this.checkvalues; var revalue = ''; for (var i = 0; i < value.length; i++) { revalue += value[i] + '、' } revalue = revalue.substring(0, revalue.length - 1) return revalue; } }, methods: { initdata: function () { var self = this; self.items = itemdata; if (itemdata.length != 0) { // self.checkvalues[0] = self.items[0].value; // self.checkids[0] = 'food-' + self.items[0].id; } }, setcheckvalue: function (ev, item) { var id = 'food-' + item.id; if (ev.target.checked) { this.checkids.push(id); } else if (this.checkids.indexof(id) > -1) { this.checkids.remove(id); } } , showcheck: function () { console.log(this.checkids) } }, filter: {}, mounted: function () { this.initdata(); } }) array.prototype.remove = function (val) { var index = this.indexof(val); if (index > -1) { this.splice(index, 1); } }; </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 拉菲红酒中国销量是怎样的?进来了解一下