自定义指令传值
<body>
<div id="app">
<!--<span v-red="skcolor">sk666</span>-->
<span v-red="{color:'red'}">sk666</span>
</div>
<div id="app2">
<span v-skblue="{color:'blue'}">sk666</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//自定义指令
//注意:vue自定义指令, 名称格式:指令名称前加v-
//注意:传的参数 要从value属性里面取
Vue.directive('red', {
bind:function (el, val) {
console.log(val);
// el.style.background = val.value;
el.style.background = val.value.color;
}
});
var vm = new Vue({
el:'#app',
data:{
msg:'hello',
//skcolor:'yellow'
}
});
//局部指令, directives 选项定义局部指令
var vm2 = new Vue({
el:'#app2',
directives:{
//格式: 指令名称 : {}
skblue:{
bind:function (el, val) {
el.style.background = val.value.color
}
}
}
})
</script>