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 18 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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/12/10 PHP
php使用GeoIP库实例
2014/06/27 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
设定php简写功能的方法
2019/11/28 PHP
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python实现子类调用父类的方法
2014/11/10 Python
Python线程的两种编程方式
2015/04/14 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
元旦晚会邀请函
2014/01/27 职场文书
运动会邀请函范文
2014/02/06 职场文书
自立自强的名人事例
2014/02/10 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
快餐公司创业计划书
2014/04/29 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
庆祝教师节标语
2014/10/09 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
导游词之井冈山
2019/11/20 职场文书