vue.js篩選功能（基於1.0版本）
<!DOCTYPE html> <html lang="zh">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title>
<style type="text/css"> #tb { width: 800px; border-collapse: collapse; margin: 20px auto; } #tb th { background-color: #0094ff; color: white; font-size: 16px; padding: 5px; text-align: center; border: 1px solid black; } #tb tr td { padding: 5px; text-align: center; border: 1px solid black; } </style> <script src="js/vue1026.js"></script> </head>
<body> <div id="app"> <input type="text" v-model="id" /> <input type="text" v-model="pname" /> <!--//篩選輸入框--> <input type="text" placeholder="請輸入篩選內容" v-model="sname" /> <button @click="addData">新增</button>
<table id="tb"> <tr> <th>編號</th> <th>品牌</th> <th>時間</th> <th>操作</th> </tr> <tr v-show="list.length == 0"> <td colspan="4">當前列表無資料</td> </tr> <!--篩選值繫結--> <tr v-for="item in list | filterBy sname in 'name'"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="javascript:void(0)" @click="delData(item.id)">刪除</a> </td> </tr> </table> </div> </body>
<script> new Vue({ el: '#app', data: { list: [{ id: 1, name: '賓士', ctime: new Date }], id: 0, pname: '', sname: '' /*篩選值定義*/ }, methods: { addData: function() { var p = { id: this.id, name: this.pname, ctime: new Date() }; this.list.push(p); this.id = 0; this.pname = ''; }, delData: function(id) { if(!confirm('是否要刪除資料')) { return; } var index = this.list.findIndex(function(item) { return item.id == id }) this.list.splice(index, 1) } }
}); </script>
</html>
本文屬於學習筆記