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效率调优经验
Jun 04 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
JavaScript实现短信倒计时60s
Oct 09 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
js实现列表按字母排序
Aug 11 Javascript
vue动态设置路由权限的主要思路
Jan 13 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读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python保存数据到本地文件的方法
2018/06/23 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
创先争优个人承诺书
2014/08/30 职场文书
寒假生活随笔
2015/08/15 职场文书
Django中celery的使用项目实例
2022/07/07 Python