Vue如何實現(xiàn)搜索和新聞列表功能

發(fā)布時間：2021-04-23 13:05:49 來源：億速云閱讀：337 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)Vue如何實現(xiàn)搜索和新聞列表功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

效果圖如下所示：

Vue如何實現(xiàn)搜索和新聞列表功能

<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="添加數(shù)據(jù)" @click="add" />
     <input type="text" placeholder="搜索數(shù)據(jù)" v-model="search" />
    </div>
    <div class="right">
     <table>
      <tr>
       <th>編號</th>
       <th>品牌名稱</th>
       <th>創(chuàng)建時間</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("是否刪除數(shù)據(jù)？")) {
       return;
      }
      //調(diào)用list.findIndex()方法，根據(jù)傳入的id獲取到這個要刪除數(shù)據(jù)的索引值
      var index = this.list.findIndex(function (item) {
       return item.id == id;
      });
      //調(diào)用list.splice(刪除的索引，刪除的元素個數(shù))
      this.list.splice(index, 1);
     },
     add: function () {
      //包裝成list要求的對象
      var tem = {
       id: this.id,
       name: this.name,
       time: new Date()
      };
      //將tem追加到list數(shù)組中
      this.list.push(tem);
      //清空頁面上的文本框中的數(shù)據(jù)
      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>

關(guān)于“Vue如何實現(xiàn)搜索和新聞列表功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

Vue如何實現(xiàn)搜索和新聞列表功能

Vue的優(yōu)點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽