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

以下是一个可能的实现方式：

<template>
  <div>
    <img :src="imageSrc" :style="{borderWidth: borderWidth + 'px'}">
    <input v-model.number="borderWidth" v-set-border>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
      borderWidth: 1
    }
  },
  directives: {
    'set-border': {
      bind(el, binding, vnode) {
        el.addEventListener('input', () => {
          vnode.context.borderWidth = el.value;
        });
      }
    }
  }
}
</script>

解释一下上面的代码：

1. 在模板中，我们使用了 `:style` 绑定图片的样式，其中 `borderWidth` 的值来自 Vue 组件的 `borderWidth` 数据。
2. 我们在输入框上使用了 `v-model.number` 指令，这样输入框会自动把输入的值转为数字类型，并将其绑定到 Vue 组件的 `borderWidth` 数据上。
3. 我们自定义了一个指令 `v-set-border`，它绑定到输入框上。在这个指令的 `bind` 钩子中，我们监听输入框的 `input` 事件，每次输入框的值发生变化时，就把它赋值给 Vue 组件的 `borderWidth` 数据。

这样，当用户在输入框中输入数字时，图片的边框宽度就会自动变化。