當前位置：
首頁 >
vue实现姓名筛选
發布時間：2023/12/8
40
豆豆
功能：輸入框中輸入名字中的一個字可進行篩選，點擊男女也可進行篩選
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="./index.css"> </head> <body><div id="app"><div class="control"><input type="text" class="search" v-model = "filterText"><div><span class="option"v-for = "(option,index) in controlOptions":class = "{'active' : optionActive[index]}"@click = "filterbySex(index,option)">{{ option }}</span></div></div><ul><li class="person"v-for = "person in personList":key = "person.id"><div class="avatar"> <img :src="person.src" :alt="person.des"></div><div class="content"><span class="name">{{ person.name }}</span><span class="des">{{ person.des }}</span></div></li></ul></div><script>const vm = new Vue({el:'#app',data:{controlOptions:['MALE','FEMALE','ALL'],optionActive:[false,false,true],filterText:'',addClassFlag:false,sex:['f','m'],personArr: [{ name: '王俊凱', src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4005587090,2408158268&fm=26&gp=0.jpg', des: '頸椎不好', sex: 'f', id: '056482' },{ name: '劉欣欣', src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915784984&di=a0056fd06188e87b922c60878e5ce6e2&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F79%2F64%2F5c05df1faf3b7_610.jpg', des: '我是誰', sex: 'm', id: '157894' },{ name: '李澤辰', src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915803971&di=47dc968f55b16a461de3e8f25bdf8600&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2016%2F11%2F27%2F190426198344.jpg', des: '我長得很好看', sex: 'f', id: '2849245' },{ name: '卡卡', src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915748758&di=5be825da4d37bcc21959946c101d5609&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F19%2F20170719211350_4PnBt.jpeg', des: '你沒有見過陌生的臉', sex: 'f', id: '348515' },{ name: '靜靜', src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571915762633&di=49517ca62ecddb638cdfb2158a64e39a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F05%2F20170205222154_WLdJS.jpeg', des: '瓜皮劉', sex: 'm', id: '478454'} ],},methods:{filterbySex(index,option){if(this.optionActive[index]){return;}for(let i = 0;i<this.optionActive.length;i++){this.optionActive[i] = false;}this.optionActive.splice(index,1,true)this.sex.length = 0;switch(option){case 'MALE':this.sex.push('m');break;case 'FEMALE':this.sex.push('f');break;case 'ALL':this.sex.push('m','f');}}},computed:{personList(){// const personArr = this.personArr;// const filterText = this.filterText;const{ personArr, filterText,sex} = this;return personArr.filter(item => item.name.includes(filterText) && sex.includes(item.sex))// return true} }})</script></body> </html> * {margin: 0;padding: 0;list-style: none;font-size: 14px;}#app {width: 500px;padding: 10px;;margin: 30px auto;}.control {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.control .search {display: inline-block;width: 300px;height: 25px;padding-left: 10px;border-radius: 4px;border: 1px solid #ccc;}.control .option {color: #3e86f4;font-size: 14px;margin-left: 10px;padding: 0 5px;border-radius: 4px;cursor: pointer;}.control .option.active {color: #fff;background-color: #3e86f4;}.person {display: flex;align-items: center;padding-bottom: 10px;padding-top: 10px;border-bottom: 1px solid #ccc;}.avatar {margin-right: 10px;vertical-align: middle;}.avatar img {width: 50px;height: 50px;}.content {display: flex;flex-direction: column;}.content .des {color: #aaa;font-size: 10px;margin-top: 5px;}總結
- 上一篇： [初学Verilog笔记]使用assig
- 下一篇： vue2.0支持compiler