java中的接口是类吗
412
2023-02-13
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;
}
//定义全局过滤器
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') {
resultlMjSoDrAfP = 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实现搜索 和新闻列表功能简单范例,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~