Vue.js 篩選搜尋小案例
阿新 • • 發佈：2018-12-22
使用Vue.js編寫一個很小的篩選搜尋案例。
根據姓名搜尋，性別篩選。
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>篩選小案例</title> </head> <body> <div id="app"> <input type="text" v-model="inputName"> <button @click="filterByName = inputName">搜尋</button> <br> 性別: <input type="radio" value="" name="gender" v-model="filterByGender">全部 <input type="radio" value="男" name="gender" v-model="filterByGender">男 <input type="radio" value="女" name="gender" v-model="filterByGender">女 <br> <br> <table> <thead> <th>id</th> <th>姓名</th> <th>性別</th> </thead> <tbody> <tr v-for="item in filterUsers"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.gender}}</td> </tr> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { filterByName: '', filterByGender: '', inputName: '', users: [ { id: 1, name: 'Jack', gender: '男' }, { id: 2, name: 'abc', gender: '女' }, { id: 3, name: 'vaxc', gender: '男' }, { id: 4, name: 'awe2', gender: '女' }, { id: 5, name: 'ave', gender: '男' } ] }, computed:{ filterUsers(){ return this.users.filter(u => u.name.includes(this.filterByName) && u.gender.includes(this.filterByGender)) } } }) </script> </body> </html>
程式碼可直接執行。
效果圖
