Example Analysis of element el-input directive Digital Control
This article mainly shows you the "element el-input directive digital control example analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn the "element el-input directive digital control example analysis" this article.
Format el-input using custom instructions
Background
When you encounter cyclic data in the process of using element, you can only enter numbers, and there are those that do not need a decimal point and need a decimal point.
Use vue directive for control
Development
How to use the page vMuthnumberIntRu 0 = "item.first_fee" 0 to keep a few decimal places
{{item.additional_amount}}
Because the el-input of element is used, and the component input is wrapped with a layer of div, you need to use const element = el.getElementsByTagName ('input') [0] to get the input to listen out of focus. When the input is not a number, it will become 0 after losing focus. Without using the directive update method, it is relatively simple to directives.js.
Directives.js
Vue.directive ('numberInt', {bind: function (el, binding, vnode) {const element = el.getElementsByTagName (' input') [0] const len = binding.arg / / initialization setting element.value = Number (element.value) .tofixed (len) / / format element.addEventListener when out of focus ('blur' Function () {if (isNaN (element.value)) {vnode.data.model.callback (0)} else {vnode.data.model.callback (Number (element.value) .tofixed (len)})}}) these are all the contents of the article "sample Analysis of element el-input directive Digital Control" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
