用Vue实现一个指令 v-set-border，通过在输入框输入数字，改变图片的边框宽度

这里是一个简单的示例代码实现：

<template>
  <div>
    <img src="https://picsum.photos/200" v-set-border="borderWidth">
    <input type="number" v-model="borderWidth">
  </div>
</template>

<script>
export default {
  data() {
    return {
      borderWidth: 1
    };
  },
  directives: {
    'set-border': {
      bind: function(el, binding) {
        el.style.border = `${binding.value}px solid black`;
      },
      update: function(el, binding) {
        el.style.border = `${binding.value}px solid black`;
      }
    }
  }
};
</script>

在模板中，我们首先渲染了一个图片和一个输入框。图片的边框宽度通过指令 `v-set-border` 来控制，这个指令在组件的 `directives` 属性中定义。

这个指令定义了 `bind` 和 `update` 两个钩子函数。在 `bind` 中，我们通过 `binding.value` 获取到了指令绑定的值并设置了图片的边框宽度。在 `update` 中，我们同样获取到了指令的值，并更新了图片的边框宽度。

在输入框中，我们使用了 `v-model` 指令来双向绑定了一个 `borderWidth` 变量，这个变量会随着用户输入的数字而改变。由于我们使用了 `v-set-border` 指令绑定了这个变量，图片的边框宽度也会随着用户输入的数字而改变。

这样，我们就实现了一个简单的指令来控制图片边框宽度的功能。