Vue-自定义指令（获取焦点、设置字体颜色指令实例）

<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-color
Vue.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;
		}
	}
})

最后

以上就是任性汽车为你收集整理的Vue-自定义指令（获取焦点、设置字体颜色指令实例）的全部内容，希望文章能够帮你解决Vue-自定义指令（获取焦点、设置字体颜色指令实例）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。