Vue实现搜索和新闻列表功能简单范例

2019-11-19 14:09:30

字体：大中小

来源：转载

供稿：网友

效果图如下所示：

<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实现搜索和新闻列表功能简单范例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：axios发送post请求,提交图片类型表单数据方法

下一篇：vue axios 表单提交上传图片的实例