美文网首页
Vue-自定义指令directive

Vue-自定义指令directive

作者: Christoles | 来源:发表于2019-04-15 20:01 被阅读0次

1. 什么是自定义指令?

就是自己设置的 v-属性,详细请看实例

2. 需要用到什么属性?

  • directive(name,callback);
      name:指令名字
      callback:回调函数
  • binding:自定义绑定的指令

3. 实例代码

html
<div id="app">
    <p v-color="red">红色 hello world</p>
    <p v-color="">绿色 hello world</p>
</div>
javascript
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局注册
    Vue.directive("color",function(el,binding){
        if(binding.value){//如果有传值用传值,如果没有则默认green
            el.style.color=binding.value;
        }else{
            el.style.color="green";
        }
        console.log(binding);
    })
    var vm = new Vue({
        el:"#app",
        data:{
            red:"red",
            yellow:"yellow"
        }
    })
    //局部注册TODO...
</script>
效果
image.png

相关文章

网友评论

      本文标题:Vue-自定义指令directive

      本文链接:https://www.haomeiwen.com/subject/hcbpwqtx.html