<div id="app"><label>Id：<input type="text" v-model="id" /></label><label>品牌：<input type="text" v-model="name" /></label><button type="button" @click="add" v-color="'blue'">添加</button><br /><label v-color>根据品牌名称搜索：<input type="text" v-model="search" @change="searchName" v-focus /></label><table cellpadding="0" cellspacing="0" border="1"><thead><tr><th>ID</th><th>创建时间</th><th>汽车品牌</th><th>操作</th></tr></thead><tbody><tr v-for="(item, i) in searchName()" :key="item.id"><td>{{item.id}}</td><td>{{item.addDate}}</td><td>{{item.name}}</td><td @click="del(i)">删除</td></tr></tbody></table></div>
// 全局自定义 获得焦点的指令 v-focus // 自定义指令 Vue.directive('自定义指令名', 配置对象)// 注意：自定义指令名不需要带前缀 v- , 但在调用的时候必须加上前缀 v-Vue.directive('focus',{//对象里面的函数，第一个参数永远是 el, 表示被绑定指令的元素。第二个参数是binding（是一个对象）// 自定义指令的时候，如果要操作元素的样式，写到bind函数中；如果要操作元素的 JS 行为，需要写到inserted函数中//当指令绑定的元素被Vue解析到了（还没有被渲染到页面中），就会执行bind函数bind(el,binding){// console.log(el);// console.log('这是bind函数');//el.focus();//表示绑定的元素调用原生JS中的focus函数。因为还没有被插入到文档中所以无法生效（类似于给div添加点击事件，但后来用JS新添加的div无法加载到这个点击事件）// el.style.color = 'red';//给元素添加的样式可以生效（类似于给div添加一个样式，就算后来用JS新添加的div也会加载这个样式）},// 当指令绑定的元素被插入到父节点的时候（插入到DOM树中），执行inserted函数inserted(el){console.log('这是inserted函数');el.focus();//可以生效}})// 全局自定义字体颜色指令 v-colorVue.directive('color',{bind(el,binding){console.log(binding);console.log(binding.name);console.log(binding.value);el.style.color = binding.value || 'red';}})var vm = new Vue({el: '#app',data: {id: '',name: '',search: '',cars: [{id: 1, addDate: new Date(), name: '宝马'},{id: 2, addDate: new Date(), name: '奔驰'}]},methods: {add(){// console.log(this.cars);var objCar = {id: this.id, addDate: new Date(), name: this.name};this.cars.push(objCar);this.id = this.name = '';},searchName(){// var newCars = [];// this.cars.forEach(item => {// // if(item.name.indexOf(this.search) != -1){// // newCars.push(item);// // }// if(item.name.includes(this.search)) newCars.push(item);// // console.log(item.name.includes(this.search));// });// return newCars;// 数组的filter方法，作用是循环指定的数组，并把满足回调函数中指定条件的项返回，得到新的数组// var newCars = this.cars.filter(item => {// return item.name.includes(this.search);// });// return newCars;console.log(this.search);return this.cars.filter(item => item.name.includes(this.search));},del(i){// this.cars.some((item, i) => {// if(item.id == id){// this.cars.splice(i,1);// }// })this.cars.splice(i,1);return this.cars;}}})
