Rumah > Artikel > hujung hadapan web > Vue实现搜索和新闻列表功能简单范例

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

亚连asal: 2018-05-29 17:28:402348semak imbas

本文通过实例代码给大家介绍了Vue实现搜索和新闻列表功能简单范例，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

效果图如下所示：

<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>
<p id="app">
   <p class="box">
    <p 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" />
    </p>
    <p 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(&#39;yyyy-mm-dd HH:mm:ss&#39;)}}</td>
       <td>
        <a href="javascript:void(0)" rel="external nofollow" @click="del(item.id)">删除</a>
       </td>
      </tr>
     </table>
    </p>
   </p>
  </p>
  <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 == &#39;yyyy-mm-dd&#39;) {
     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" >
  <p class=weui_cell_hd >
   <i class="fa fa-credit-card fa-2x icon-color" style=width:35px;margin-right:15px;display:block ></i>
  </p>
  <p class="weui_cell_bd weui_cell_primary" >
   <p > {{HospPatientName}}
    <span style=margin-left:15px class=blue_tag >{{HospCardType}}</p>
   <p >{{HospCardNo}}</p></p>
  <p class=weui_cell_ft >
  {{HospIsDefault}}
   </p>
 </a>
             */
     }
   };
   var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
     id: &#39;&#39;,
     name: &#39;&#39;,
     search: &#39;&#39;,
     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>

上面是我整理给大家的，希望今后会对大家有帮助。

深入理解Node module模块

JS从非数组对象转数组的方法小结

js+canvas实现滑动拼图验证码功能

Atas ialah kandungan terperinci Vue实现搜索和新闻列表功能简单范例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：怎样使用npm安装删除模块Artikel seterusnya：怎样使用vux uploader 图片上传组件

Artikel berkaitan

Lihat lagi

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

Artikel berkaitan

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