11-自定义按键修饰 获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue.js"></script>
<script src="./lib/moment.js"></script>
<style>
th,td{
height: 20px;
/*width: 260px;*/
font-size: 40px;
border: 1px solid red;
text-align: center;
}
table{
border-collapse:collapse;
}
input{
margin-top: 30px;
margin-bottom: 30px;
height: 40px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<lable>Id:
<input type="text" v-model="id">
</lable>
<lable>Name:
<input type="text" v-model="name" @keyup.enter="add">
<!--<input type="text" v-model="name" @keyup.113="add">-->
</lable>
<input type="button" value="添加" @click="add" :style="{color:'red'}">
<lable>搜索关键字:
<!--vue中所以指定调用时候用v-开头-->
<input type="text" v-model="keyword" id="search" v-color>
</lable>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Time</th>
<th>Del</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in search(keyword)" :key="i">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | dataFormat(pattern)}}</td>
<td><a href="javascript:;" @click.prevent="jian(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.filter('dataFormat',function (dataStr,pattern='YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)
})
Vue.config.keyCodes.f2=113
//自定义按键修饰符
//定义全局指定 参数1 指定名称,参数2 是一个对象
// 注意调用时候需要加v-前缀
Vue.directive('focus',{
bind:function (el) { //当元素绑定会立即执行,只执行一次
// el.focus()
},
inserted:function (el){ //元素插入到dom中时候会执行函数 触发一次
el.focus()
},
updated:function (el) { //当更新的时候会执行,可以触发多次
}
})
Vue.directive('color',{
bind:function (el) {
el.style.color='red'
}
})
var vm = new Vue({
el:'#app',
data(){
return {
list:[
{id:1,name:'奔驰',time:new Date()},
{id:2,name:'宝马',time:new Date()},
{id:3,name:'奇瑞',time:new Date()},
],
id:"",
name:"",
keyword:''
}
},
methods: {
add(){
this.list.push({id:this.id,name:this.name,time:new Date()})
this.id=""
this.name=""
},
jian(id){
// 根据id找到要删除对象的索引
// for(var i=0,i<this.list.length,i++)
// this.list.some((item,i) =>{
// if(item.id==id){
// this.list.splice(i,1)
// }
// })
// var idd=id-1
// this.list.splice(idd,1)
var index=this.list.findIndex((item,i) => {
if(item.id==id){
return true;
}
})
this.list.splice(index,1)
},
//根据关键字进行搜索
search(keyword){
// var newlist=[]
// this.list.forEach(item=>{
// if(item.name.indexOf(keyword) != -1){
// newlist.push(item)
// }
// })
// return newlist
// 注意 foreach some filter findindex
return this.list.filter(item =>{
// includes包含 返回true 否则false
if(item.name.includes(keyword)){
return item
}
})
}
}
})
// 第一个参数永远是是过滤器管道符传过来的数据
// Vue.filter('过滤器名称',function () {
//
// })
// document.getElementById('search').focus()
</script>
</body>
</html>