前面写 focus 方法, 也说了 必须用 inserted ,因为你bind 只是创建的过程,但是你没有 insert dom页面, 还是没有生成页面效果, 下边我们创建自定义的
的样式 就不需要插入了, 因为他直接可以读取并显示。
总结: 自定义行为 要用inserted ,自定义样式 要用 bind 就行了
我们想创建一个color 样式如下:
<input type="text" v-model="key_words" class="form-control" v-focus v-color>
自定义指令 color 如下:
Vue.directive('color',{
bind:function(el,binding){
el.style.color=blue },
}
)
效果是可以的, 会对输入的内容的颜色改变, 但是我想给它传递个值red,看看可以吗 , 试试效果。
<input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">
如果想接受参数,必须要用到 binding 对象,介绍下这个对象保存的什么?
我们只关心 三个 就行:name,value, expression
比如我们写
<input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">
其中 name 对应的是 color ,value 就是 red , expression就是’red’.
直接取到binding的value 替换成样式的color 就行了,代码如下:
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value
},
inserted:function(el){
el.focus()
},
updated:function(el){
}
}
)
是可以实现的,下边就是代码的全部了 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="pp" >
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加宠物</h3>
</div>
<div class="panel-body form-inline">
<label>id:</label>
<input type="text" v-model="id" class="form-control">
<label>name:</label>
<input type="text" v-model="name" class="form-control">
<input type="button" value="添加" @click="add" class="btn btn-primary">
<label>关键字搜索:</label>
<input type="text" v-model="key_words" class="form-control" v-focus v-color="'red'">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tr v-for="item,index in search(key_words)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td style="color: #0e9aef"><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</table>
</div>
<div>
<script>
Vue.directive('focus',{
bind:function(el){
el.focus()
},
inserted:function(el){
el.focus()
},
updated:function(el){
}
}
)
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value
},
inserted:function(el){
el.focus()
},
updated:function(el){
}
}
)
var vue=new Vue(
{
el: '#pp',
data: {
id:'',
name:'',
key_words: '',
list:[{id:1,name:"小狗",ctime:new Date()},{id:2,name:"小猫",ctime:new Date()},{id:3,name:"金鱼",ctime:new Date()},{id:4,name:"大闸蟹",ctime:new Date()}]
},
methods: {
add: function () {
this.list.push({id:this.id,ctime:new Date(),name: this.name})
this.name=this.id=''
},
del(id){
var index=this.list.findIndex((item)=>{ if(item.id == id){
return true;
}
}
)
this.list.splice(index,1)
},
search(key_words){
var newlist=[]
this.list.forEach(item => { // 调用了forEach 进行遍历
if( item.name.indexOf(key_words) !=- 1){ // 进行条件判断,看是否包含
newlist.push(item) //由于 forEach 没有返回数组 所以要进行push 到新的数组并返回、
}
});
return newlist
}
}
}
)
</script>
</div>
</body>
</html>