html列表项目实例,品牌列表案例.html

品牌列表案例

添加品牌

Id:

Name:

搜索名称关键字:

IdNameCtimeOperation

{{item.id}}{{item.name}}{{item.ctime | dateFormat()}}

删除

var vm = new Vue({

el:"#app",

data:{

id:"",

name:"",

keywords:"",

list:[

{ id:1, name:'奔驰', ctime:new Date() },

{ id:2, name:'宝马', ctime:new Date() }

]

},

methods:{

add(){

var car = { id: this.id, name: this.name, ctime:new Date()}

this.list.push(car)

this.id = this.name = ""

},

del(id) {

//this.list.some((item, i) => {

//if(item.id == id) {

//this.list.splice(i,1)

//return true;

//}

//})

var index = this.list.findIndex(item => {

if (item.id == id){

return true;

}

})

this.list.splice(index,1)

},

search(keywords){

var newList = []

this.list.forEach(item => {

if(item.name.indexOf(keywords) != -1){

newList.push(item)

}

})

return newList

}

}

})

Vue.filter('dateFormat',function(dateStr,pattern){

var dt = new Date(dateStr)

var y = dt.getFullYear()

var m = dt.getMonth()+1

var d = dt.getDate()

//

//if(pattern.toLowerCase() === 'yyyy-mm-dd'){

//return '$(y)-$(m)-$(d)'

//}else{

//var hh = dt.getHours()

//var mm = dt.getMinutes()

//var ss = dt.getSeconds()

//

//return '$(y)-$(m)-$(d) $(hh):$(mm):$(ss)'

//

//}

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史