钩子函数的属性
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。 value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。//等于号后面的值 oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。 arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。 modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
一个实例(modifiers,arg属性):
js代码:
Vue.directive("pin2",function(el,binding){ var val = binding.value; var position = binding.modifiers;//获取对象数组,使用需要遍历 var warnning = binding.arg;//获取true属性 if(val){ el.style.position = "fixed"; for(var key in position){//遍历对象数组,使用modifier属性 if(position[key]) { el.style[key] = '10px'; } if(warnning){//使用arg属性 el.style.background = "yellow"; } } }else{ el.style.position = "static"; } });
html代码:
<div id="app"> <div class="card" v-pin2:true.bottom.right="card1.pin" > <button @click="card1.pin = !card1.pin">固定/取消</button><br> 卡片1 </div> <div class="card" v-pin2.bottom.left="card2.pin"> <button @click="card2.pin = !card2.pin">固定/取消</button><br> 卡片2 </div> </div>