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学习笔记二 实现可编辑的表格
Apr 09 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
js实现一个简易计算器
Mar 30 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 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生成静态html文件的三种方法
2013/06/18 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php简单获取复选框值的方法
2016/05/11 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
List Installed Software Features
2007/06/11 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
js数组的操作详解
2013/03/27 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
js对象基础实例分析
2015/01/13 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python正则表达式知识汇总
2017/09/22 Python
Python处理中文标点符号大集合
2018/05/14 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
就业推荐自我鉴定
2013/10/06 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
医院科室评语
2015/01/04 职场文书
少先队中队工作总结
2015/08/14 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server