自定义指令传值
<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
