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


Posted in Javascript onMarch 16, 2018

效果图如下所示:

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

Javascript 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
input的focus方法使用
Mar 13 Javascript
各种常用的JS函数整理
Oct 25 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
vue axios 表单提交上传图片的实例
Mar 16 #Javascript
vue中实现图片和文件上传的示例代码
Mar 16 #Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 #Javascript
Vue实现active点击切换方法
Mar 16 #Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 #Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 #Javascript
You might like
php zend 相对路径问题
2009/01/12 PHP
php下将XML转换为数组
2010/01/01 PHP
关于php开启错误提示的总结
2019/09/24 PHP
javascript 写类方式之五
2009/07/05 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
我的老师教学反思
2014/05/01 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
python 中的@运算符使用
2021/05/26 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python