<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div>
<span>
id:<input type="" name="" v-model='id'>
</span>
<span>
<!--- @keyup.enter='add' 键盘事件调用方法--->
name:<input type="" name="" v-model='name'>
</span>
<button type="" @click='add'>添加</button>
<span>
搜索内容:<input type="" name="" v-model='keywords'>
</span>
</div>
<div v-for="i in search(keywords)" :key='datas.id'>
<span>{{i.id}}</span>
<span>{{i.name | update}}</span>
<span>{{i.date}}</span>
<span @click='del(i.id)'>删除</span>
</div>
</div>
<script type="text/javascript">
//全局过滤器 过滤器调用就近原则 先掉私有
Vue.filter('update',function(data){
return data.replace('成','程逢池')
})
var vm = new Vue({
el:'#app',
data:{
id:null,
name:null,
keywords:'',
datas:[
{id:1,name:'成',date:new Date()},
{id:2,name:'逢',date:new Date()},
{id:3,name:'吃',date:new Date()}
]
},
methods:{
add:function(){
if(this.id ==null || this.name ==null){
alert('有为空的参数')
}
var myDate = new Date();//获取系统当前时间
//toString() 转整型
//padStart() 位数补充
this.datas.push({id:this.id,name:this.name,date:myDate.getFullYear()})
this.id=null
this.name=null
},
del:function(id){
this.datas.some((item,i)=>{
// 返回true程序终止循环
if(item.id==id){
this.datas.splice(i,1)
return true
}
// findIndex函数也可以
})
},
search:function(keywords){
var newlist=[]
this.datas.forEach(item=>{
if(item.name.indexOf(keywords) != -1){
newlist.push(item)
}
})
return newlist
}
},
//私有过滤器
filters:{
}
})
</script>
</body>
</html>