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

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})}}}
}

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

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

directives: {thousands: {// 虚拟dom更新时调用update: function (el) {console.log("执行了吗")  // 执行两次// 获取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})}}}
}

以上的例子实现了在虚拟dom更新时也会执行，但是还是不能实现接口数据返回后执行，因为ajax请求是属于异步操作，update钩子函数中拿不到数据更新后的值，思路是使用setTimeout转化成异步，就可以拿到了

let timer = setTimeout(() => {console.log("最新的值",el.value)// 千分位el.value = parseFloat(el.value).toLocaleString('zh', {minimumFractionDigits: 2,maximumFractionDigits: 2})clearTimeout(timer)
}, 0)

完整代码：

{{!show?'显示':'隐藏'}}