我找到了number to words脚本，并希望在.vue文件中使用此脚本，但无法找到插入此脚本的位置。也许有人可以帮助在哪里插入此脚本？以及如何更改适用于vuejs2的onkeyup
function convertNumberToWords(amount) {
var words = new Array();
words[0] = '';
words[1] = 'One';
words[2] = 'Two';
words[3] = 'Three';
words[4] = 'Four';
words[5] = 'Five';
words[6] = 'Six';
words[7] = 'Seven';
words[8] = 'Eight';
words[9] = 'Nine';
words[10] = 'Ten';
words[11] = 'Eleven';
words[12] = 'Twelve';
words[13] = 'Thirteen';
words[14] = 'Fourteen';
words[15] = 'Fifteen';
words[16] = 'Sixteen';
words[17] = 'Seventeen';
words[18] = 'Eighteen';
words[19] = 'Nineteen';
words[20] = 'Twenty';
words[30] = 'Thirty';
words[40] = 'Forty';
words[50] = 'Fifty';
words[60] = 'Sixty';
words[70] = 'Seventy';
words[80] = 'Eighty';
words[90] = 'Ninety';
amount = amount.toString();
var atemp = amount.split(".");
var number = atemp[0].split(",").join("");
var n_length = number.length;
var words_string = "";
if (n_length <= 9) {
var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
var received_n_array = new Array();
for (var i = 0; i < n_length; i++) {
received_n_array[i] = number.substr(i, 1);
}
for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
n_array[i] = received_n_array[j];
}
for (var i = 0, j = 1; i < 9; i++, j++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
if (n_array[i] == 1) {
n_array[j] = 10 + parseInt(n_array[j]);
n_array[i] = 0;
}
}
}
value = "";
for (var i = 0; i < 9; i++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
value = n_array[i] * 10;
} else {
value = n_array[i];
}
if (value != 0) {
words_string += words[value] + " ";
}
if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Crores ";
}
if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Hundred and ";
}
if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Thousand ";
}
if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
words_string += "Hundred and ";
} else if (i == 6 && value != 0) {
words_string += "Hundred ";
}
}
words_string = words_string.split(" ").join(" ");
}
return words_string;
}<input type="text" name="number" placeholder="Number OR Amount" onkeyup="word.innerHTML=convertNumberToWords(this.value)" />
<div id="word"></div>
答案 0 :(得分：2)
你真的没有利用Vue这样做的方式。您根本不需要使用手动事件处理程序或直接DOM操作;相反，让框架为您处理它。一种方法是根据输入值使用计算属性：
<input type="text" name="number" placeholder="Number OR Amount" v-model="theNumber">
<div id="word" v-html="theWord"></div>
...
computed: {
theWord() {
// your "convertNumberToWords" function here, using `this.theNumber` as its input, and returning the word you want displayed in the DOM
return "foo";
}
}
每当v-model theNumber发生变化时，计算出的theWord函数将自动运行并更新DOM。
以下是一个功能性示例，其中包含完整的“数字到单词”功能：
Vue.component('theComponent', {
template: `
<span>
<input v-model="theNumber">
<div v-html="theWord"></div>
</span>`,
data() {
return {
theNumber: '1'
}
},
computed: {
theWord() {
var words = new Array();
words[0] = '';
words[1] = 'One';
words[2] = 'Two';
words[3] = 'Three';
words[4] = 'Four';
words[5] = 'Five';
words[6] = 'Six';
words[7] = 'Seven';
words[8] = 'Eight';
words[9] = 'Nine';
words[10] = 'Ten';
words[11] = 'Eleven';
words[12] = 'Twelve';
words[13] = 'Thirteen';
words[14] = 'Fourteen';
words[15] = 'Fifteen';
words[16] = 'Sixteen';
words[17] = 'Seventeen';
words[18] = 'Eighteen';
words[19] = 'Nineteen';
words[20] = 'Twenty';
words[30] = 'Thirty';
words[40] = 'Forty';
words[50] = 'Fifty';
words[60] = 'Sixty';
words[70] = 'Seventy';
words[80] = 'Eighty';
words[90] = 'Ninety';
amount = this.theNumber.toString();
var atemp = amount.split(".");
var number = atemp[0].split(",").join("");
var n_length = number.length;
var words_string = "";
if (n_length <= 9) {
var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
var received_n_array = new Array();
for (var i = 0; i < n_length; i++) {
received_n_array[i] = number.substr(i, 1);
}
for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
n_array[i] = received_n_array[j];
}
for (var i = 0, j = 1; i < 9; i++, j++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
if (n_array[i] == 1) {
n_array[j] = 10 + parseInt(n_array[j]);
n_array[i] = 0;
}
}
}
value = "";
for (var i = 0; i < 9; i++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
value = n_array[i] * 10;
} else {
value = n_array[i];
}
if (value != 0) {
words_string += words[value] + " ";
}
if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Crores ";
}
if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Hundred and ";
}
if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Thousand ";
}
if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
words_string += "Hundred and ";
} else if (i == 6 && value != 0) {
words_string += "Hundred ";
}
}
words_string = words_string.split(" ").join(" ");
}
return words_string;
}
}
});
new Vue({
el: '#app'
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
<the-component></the-component>
</div>
或者，如果您在整个应用中频繁使用此功能，则最好将其实现为filter。在main.js中定义过滤器，它将在所有组件中可用：
Vue.filter('numberToWord', function (value) {
// your function here
})
<!-- these are equivalent: -->
<span>{{theNumber | numberToWord}}</span>
<span>{{filters.numberToWord(theNumber)}}</span>
顺便说一下：这与您的问题没有直接关系，但是您应该注意的数字到单词功能本身存在一些问题;对于99,999以上的许多输入值，它失败了 - 100001就像“一百零一”一样 - 并且使用区域特定的术语“Crores”达到一千万，你可能想删除它，除非你的网站是用于熟悉该术语的观众。
Here are several other implementations of the same idea，其中一些可能比上面使用的更好。
答案 1 :(得分：0)
以下是一些方法。
您可以将此脚本添加到另一个Javascript文件，并将其导入.vue文件的脚本部分。
<script>
import numberToWords from 'utils';
....
</script>
或者您可以在组件中创建一个具有此功能的方法。
在我看来，第一个版本更好，因为您可以在所有组件中重复使用它。
答案 2 :(得分：0)
.vue个文件接受所有有效的JavaScript代码，因此您可以将此函数简单地放在methods对象的Vue组件中并正常使用，或者如果您想在多个文件中使用它组件，您也可以将它放在一个文件中，并将其导入您的组件。