<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=adge">
<title>Document</title>
<script src="vue.js"></script>
<script src="moment.js"></script>
</head>
<body>
<div id="app">
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
    <span v-color="'pink'">品牌检索：</span>
<input type="text" v-model="keywords" @change="searchName" v-focus>
<table border="1">
<tr>
<th>序号</th>
<th>名称</th>
<th>时间</th>
<th v-color>操作</th>
</tr>
<tr v-for="item in searchName()" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 在调用过滤器的时候，要使用|线，这个|线叫做管道符 -->
<td>{{item.date | formatDate | addstr("====")}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
Vue.directive("color",{
bind:function(el,binding){
console.log(binding.name)
el.style.color=binding.value || "red" //有值就用，没值默认red颜色
},
inserted:function(el){}
})
//全局自定义获得焦点v-focus指令
//注意：Vue自定义指令名称中，不需要写v-前缀，但是，在调用自定义指令的时候，必须自前面加上v-前缀，但是，在调用自定义指令的时候，必须自前面加上v-前缀
Vue.directive("focus",{
//参数列表中的第一个参数，永远是el，表示被绑定指令的那个元素
//如果要操作元素的样式，写到bind中就行了，当然也到inserted中也行，也有效果
bind:function(el){//当指令绑定到的元素，被vue实例解析的时候，就好立即执行bind函数
console.log(el)
console.log("bind被执行了")
//这是 JS DOM API中原生方法
//el.focus()//如果想要让文本获得焦点，那么，文本框必须插入到文档中才能生效，放在这里不合适
el.style.color='red'//这个是样式，会生效，它有滞后性。
},
//今后在自定义指令的时候，如果要操作元素的js行为，最好写到inserted中
inserted:function(el){//调用时机：当指令绑定到的元素，被插入到文档的父节点时候，调用inserted函数
console.log(el)
console.log("inserted被执行了")
el.focus()//这个是行为
}
})
//Vue.filter("过滤器将来被调用的名称",过滤器的处理函数)
//如果要为过滤器传递参数，则传递的参数只能在第二个形参的位置开始接收，如果要传第三个，往后加即可
Vue.filter("addstr",function(data,str){
return data+str
})
//注意：过滤器处理函数中，第一个形参，作用已经被定死了，永远是管道符前面的值
Vue.filter('formatDate',function(data){
console.log("过滤器被调用了")
//return data+"~~~"
//导入moment.js可以使用里面的格式化时间
return moment(data).format("YYYY-MM-DD HH:mm:ss")
})
//创建Vue实例，得到ViewModel
var vm=new Vue({
el:"#app",
data:{
id:'',
name:'',
keywords:'',
pinpai:[
{id:1,name:"奔驰",date:new Date()},
{id:2,name:"宝马",date:new Date()},
{id:3,name:"奔奔",date:new Date()},
{id:4,name:"野马",date:new Date()}
]
},
methods:{
add(){
this.pinpai.push({id:this.id,name:this.name,date:new Date()})
this.id=this.name=""
},
del(id){
//console.log(id)
//分析业务逻辑：
//1.根据拿到的商品id,查找到对应的商品索引
//2.根据拿到的索引值，去数组中调用splice方法删除对应的那个元素
/*for(let i=0;i<this.pinpai.length;i++){
if(this.pinpai[i].id==id){
this.pinpai.splice(i,1)
break;
}
}*/
//另一种判断id,及删除方法
const index=this.pinpai.findIndex(function(item,i,arr){
//if(item.id==id){
//return true
//}
return item.id==id
})
this.pinpai.splice(index,1)
console.log(index)
},
searchName(){
//数组的filter方法，作用是循环指定的数组，并把满足回调函数中指定条件的项返回，从而得到一个新数组
/*
return this.pinpai.filter((item)=>{
return item.name.includes(this.keywords)
})*/
//也可以把上面三行代码变一行
return this.pinpai.filter(item => item.name.includes(this.keywords))
}
}
});
</script>
</html>
浙公网安备 33010602011771号