JavaScript

超轻量级php框架startmvc

Vue实现搜索 和新闻列表功能简单范例

更新时间:2020-07-02 17:36:01 作者:startmvc
效果图如下所示:<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>无标题页</title&

效果图如下所示:


<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实现搜索 和新闻列表功能简单范例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

vue 新闻列表 vue 搜索