自定义指令局部指令

  • 局部指令,需要定义在 directives 的选项 用法和全局用法一样

  • 局部指令只能在当前组件里面使用

  • 当全局指令和局部指令同名时以局部指令为准

<input type="text" v-color='msg'>
 <input type="text" v-focus>
 <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
         //局部指令,需要定义在  directives 的选项
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>

 

posted @ 2022-02-11 11:01  Harry宗  阅读(110)  评论(0)    收藏  举报