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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php bootstrap实现简单登录
2016/03/08 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
Python面向对象特殊成员
2017/04/24 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
创先争优制度
2014/01/21 职场文书
感恩节活动方案
2014/01/27 职场文书
社区居务公开实施方案
2014/03/27 职场文书
商铺租房协议书范本
2014/12/04 职场文书
世界环境日活动总结
2015/02/11 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS