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 相关文章推荐
javascript中文本框中输入法切换的问题
Dec 10 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
七个很有意思的PHP函数
May 12 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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验证码(支持中文)
2007/02/14 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
js实现简易计算器功能
2019/10/18 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
linux下python使用sendmail发送邮件
2018/05/22 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
String和StringBuffer的区别
2015/08/13 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
人事部专员岗位职责
2014/03/04 职场文书
文案策划求职信
2014/03/18 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
画展观后感
2015/06/17 职场文书