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

效果图如下所示：

无标题页

.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;

}

编号	品牌名称	创建时间	操作
{{item.id}}	{{item.name}}	{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}	删除

//定义全局过滤器

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(){

/**

{{HospPatientName}}

{{HospCardType}}

{{HospCardNo}}

{{HospIsDefault}}

*/

}

};

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;

}

}

})

总结

以上所述是小编给大家介绍的Vue实现搜索 和新闻列表功能简单范例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！