vue自定义一个指令实现el-input-number组件显示千分号，但实际拿到的值是number类型

下面先简单实现聚焦输入时是数字，失焦时展示千分号，但实际拿到的值也还是数字；

<el-input-number v-model="form.aaaa" :min="0" :precision="2" v-thousands>
el-input-number>
1
2

directives: {
   
  thousands: {
   
    // 被绑定元素插入父节点时调用
    inserted: function (el) {
   
      // 获取input节点
      if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
   
        el = el.getElementsByTagName('input')[0]
      }
      // 千分位
      el.value = parseFloat(el.value).toLocaleString('zh', {
   
      	minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      // 聚焦转化为数字格式（去除千分位）
      el.onfocus = e => {
   
        let a = el.value.replace(/,/g, '') //去除千分号的','
        el.value = parseFloat(a).toFixed(2)
      }
      el.onblur = e => {
   
        el.value = parseFloat(el.value).toLocaleString('zh', {
   
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        })
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

以上的例子可以实现把el-input-number绑定的初始值转化成千分号，也可以在失焦时转化千分号；
但是如果是通过调用接口获取数据，再赋值给el-input-number绑定的值，就不能实现页面刚加载就展示千分号；原因是因为inserted只在插入父节点时调用，只会执行一次，也就是在初始化页面的时候会调用一次，当数据更新后不会再调用，因此不能实现在数据更新后，转化为千分号；

改变思路：使用update代替inserted，update是组件VNode更新时调用，当数据发生变化的时候，VNode必然会更新；

directives: {
   
  thousands: {
   
    // 虚拟dom更新时调用
    update: function (el) {
   
    console.log("执行了吗")  // 执行两次
      // 获取input节点
      if
1
2
3
4
5
6
7
8
9