自定義指令傳值
<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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
