如何处理clearInput离子来清除v-模型

Vue.directive('clearInput', {
  bind: function(el, binding, vnode) {
    // 绑定指令时的处理逻辑
  },
  inserted: function(el, binding, vnode) {
    // 插入元素时的处理逻辑
  },
  unbind: function(el, binding, vnode) {
    // 解绑指令时的处理逻辑
  }
});

bind: function(el, binding, vnode) {
  // 绑定指令时的处理逻辑
  var clearBtn = document.createElement('i');
  clearBtn.className = 'clear-icon';
  clearBtn.addEventListener('click', function() {
    vnode.context[binding.expression] = '';
  });
  el.parentNode.insertBefore(clearBtn, el.nextSibling);
}

inserted: function(el, binding, vnode) {
  // 插入元素时的处理逻辑
  var clearBtn = el.nextSibling;
  clearBtn.style.display = 'none';
  
  el.addEventListener('input', function() {
    if (el.value !== '') {
      clearBtn.style.display = 'block';
    } else {
      clearBtn.style.display = 'none';
    }
  });
}

unbind: function(el, binding, vnode) {
  // 解绑指令时的处理逻辑
  var clearBtn = el.nextSibling;
  clearBtn.removeEventListener('click', function() {
    vnode.context[binding.expression] = '';
  });
}