{"id":1930,"date":"2022-07-30T13:06:37","date_gmt":"2022-07-30T05:06:37","guid":{"rendered":"https:\/\/yukihiew.com\/?p=1930"},"modified":"2022-08-10T23:57:27","modified_gmt":"2022-08-10T15:57:27","slug":"vue-input-to-thousand","status":"publish","type":"post","link":"https:\/\/yukihiew.com\/vue-input-to-thousand\/","title":{"rendered":"Vue | table\u6b04\u4f4d input\u8f38\u5165\u6578\u5b57\u5448\u73fe\u5343\u4f4d\u6578\u5b57\u4e32\u5beb\u6cd5 \u4e0d\u5f71\u97ffdata\u88e1\u8cc7\u6599\u70ba\u6578\u5b57"},"content":{"rendered":"
\u5de5\u4f5c\u4e0a\u7684\u5c08\u6848\u4f7f\u7528Vue\u4f5c\u70ba\u524d\u7aef\u7684\u6846\u67b6\uff0c\u5728\u64b0\u5beb\u6709\u8f38\u5165\u6578\u503c\u3001\u8a08\u7b97\u6578\u503c\u9700\u6c42\u7684\u9801\u9762\uff0c\u78b0\u4e0a\u9700\u8981\u5c07input\u8f38\u5165\u6846\u7684\u6578\u5b57\u8f49\u6210\u4e09\u4f4d\u4e00\u6487(\u5343\u4f4d\u6578)\u7684\u5b57\u4e32\u5f62\u5f0f\u5448\u73fe\uff0c\u908a\u8f38\u5165\u908a\u8f49\u63db\uff0c\u4f46\u662fvue data\u88e1\u5132\u5b58\u7684\u8cc7\u6599\u578b\u614b\u6703\u662f\u53bb\u9664\u4e09\u4f4d\u4e00\u6487\u7684\u6578\u5b57\u3002<\/p>\n\n\n
\u672c\u4f86\u5f88\u7169\u60f1\u600e\u9ebc\u89e3\u6c7a\uff0c\u7db2\u8def\u6587\u7ae0\u4e5f\u6709\u8a31\u591a\u4e0d\u540c\u7684\u5beb\u6cd5\uff0c\u4f46\u5927\u591a\u90fd\u770b\u5f97\u9727\u715e\u715e\uff0c\u6700\u5f8c\u6c7a\u5b9a\u7528\u81ea\u5df1\u7684\u65b9\u5f0f\u5beb\uff0c\u4f9d\u7167\u9019\u500b\u9700\u6c42\u53ef\u4ee5\u5206\u6210\u5169\u500b\u8981\u89e3\u6c7a\u7684\u9ede:<\/p>\n\n\n\n
\u7531\u65bc\u8b80\u53d6\u8207\u5b58\u53d6\u7684\u5f62\u5f0f\u4e0d\u540c\u6240\u4ee5\u4e0d\u80fd\u7528v-model\u76f4\u63a5\u7d81\u5b9a\uff0c\u9700\u8981\u8b80\u5beb\u5206\u958b\u8655\u7406\u3002<\/p>\n\n\n
\u5c07input\u8981\u50b3\u5165\u7684value\u50b3\u5165\u8f49\u63db\u6210\u4e09\u4f4d\u4e00\u6487(\u5343\u4f4d\u6578)\u7684function\uff0c\u9019\u908a\u662f\u7528\u6b63\u898f\u8868\u9054\u5f0f\u505a\u6539\u5beb\u3002<\/p>\n\n\n\n
\/\/template\n<input type=\"text\" :value=\"thousand(data.value)\" ><\/code><\/pre>\n\n\n\n\/\/methods\n thousand (data) {\n if (data !== undefined) {\n data = data.toString().replace(\/\\B(?<!\\.\\d*)(?=(\\d{3})+(?!\\d))\/g, \",\");\n }\n return data;\n };<\/code><\/pre>\n\n\n\u5b58\u9032vue data\u6642\u5fc5\u9808\u662f\u6578\u5b57\u578b\u614b<\/h2>\n\n\n
\u7d81\u5b9a input \u52d5\u4f5c\uff0c\u8f38\u5165\u6642\u540c\u6642\u53d6\u5f97\u503c\uff0c\u53bb\u6389\u5343\u4f4d\u6578\u8f49\u70banumber\u5b58\u9032data\u3002<\/p>\n\n\n\n
\/\/template\n<input type=\"text\" :value=\"thousand(data.value)\" \n @input='inputToThousand(\"\u91d1\u984d\",data.index,$event)' ><\/code><\/pre>\n\n\n\n\/\/methods\ninputToThousand (name, index, event, arr = this.items) {\n \/\/\u8f38\u5165\u6642\u8f49\u6210\u7121\u5343\u4f4d\u6578\u5b58\u5230data\n event.target.value = event.target.value.replace(\/[^\\d]\/g, \"\").replace(\/^[0]+\/, \"\");\n if (event.target.value === \"\") event.target.value = 0;\n const parts = event.target.value.toString().split(\".\");\n parts[0] = parts[0].replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \",\");\n event.target.value = parts.join(\".\");\n let obj = arr[index];\n obj[name] = event.target.value.replace(\/,\/g, \"\"); \/\/\u8981\u5b58\u56de\u53bbitems\n };<\/code><\/pre>\n\n\n\n\u6700\u5f8c\u770b\u770b\u771f\u5be6\u7684\u7d50\u679c:<\/p>\n\n\n\n