溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue如何實現搜索和新聞列表功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
效果圖如下所示：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>無標題頁</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"> <script src="/style/js/vue.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.js"></script> <style> .box { width: 900px; height: auto; overflow: hidden; margin: 30px auto; } .left { height: 150px; width: 185px; padding: 5px; display: inline-block; border: 1px solid black; } .left input { padding: 2px; margin-top: 10px; } .right { width: 600px; height: auto; display: inline-block; margin-left: 30px; vertical-align: top; } .right table { border-collapse: collapse; width: 580px; } .right table th { background-color: green; padding: 5px; text-align: center; border: 1px solid black; color: #FFFFFF; } .right table tr { text-align: center; } .right table td { border: 1px solid black; } </style> </head> <body> <div id="app"> <div class="box"> <div class="left"> <input type="text" placeholder="輸入編號" v-model="id" /> <input type="text" placeholder="輸入名稱" v-model="name" /><br /> <input type="button" value="添加數據" @click="add" /> <input type="text" placeholder="搜索數據" v-model="search" /> </div> <div class="right"> <table> <tr> <th>編號</th> <th>品牌名稱</th> <th>創建時間</th> <th>操作</th> </tr> <tr v-for="item in searchData"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td> <td> <a href="javascript:void(0)" rel="external nofollow" @click="del(item.id)">刪除</a> </td> </tr> </table> </div> </div> </div> <script> //定義全局過濾器 Vue.filter("datefmt", function (input, formatstring) { var result = ""; var year = input.getFullYear(); var month = input.getMonth() + 1; var day = input.getDate(); var hour = input.getHours(); hour = hour < 10 ? "0" + hour : hour; var minute = input.getMinutes(); minute = minute < 10 ? "0" + minute : minute; if (formatstring == 'yyyy-mm-dd') { result = year + "-" + month + "-" + day; } else { result = year + "-" + month + "-" + day + " " + hour + ":" + minute; } return result; }) var TEMPLATE={ options:function(){ /** <a class="weui_cell" href="javascript:void(0);" rel="external nofollow" > <div class=weui_cell_hd > <i class="fa fa-credit-card fa-2x icon-color" style=width:35px;margin-right:15px;display:block ></i> </div> <div class="weui_cell_bd weui_cell_primary" > <p > {{HospPatientName}} <span style=margin-left:15px class=blue_tag >{{HospCardType}}</p> <p >{{HospCardNo}}</p></div> <div class=weui_cell_ft > {{HospIsDefault}} </div> </a> */ } }; var vm = new Vue({ el: '#app', data: { id: '', name: '', search: '', list: [{ "id": 1, "name": "寶馬", "time": new Date() }, { "id": 2, "name": "奔馳", "time": new Date() } ] }, methods: { del: function (id) { if (!confirm("是否刪除數據？")) { return; } //調用list.findIndex()方法，根據傳入的id獲取到這個要刪除數據的索引值 var index = this.list.findIndex(function (item) { return item.id == id; }); //調用list.splice(刪除的索引，刪除的元素個數) this.list.splice(index, 1); }, add: function () { //包裝成list要求的對象 var tem = { id: this.id, name: this.name, time: new Date() }; //將tem追加到list數組中 this.list.push(tem); //清空頁面上的文本框中的數據 this.id = ""; this.name = ""; } }, computed: { searchData: function () { var search = this.search; if (search) { return this.list.filter(function (name) { return Object.keys(name).some(function (key) { return String(name[key]).toLowerCase().indexOf(search) > -1 }) }) } return this.list; } } }) </script> </body> </html>
關于“Vue如何實現搜索和新聞列表功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
