java类似金山打字的键盘模拟_使用vue写一个类似金山打字通

需求

上一行文字，下一行输入框，在输入框中输入文字，然后比较输入的文字与上一行对应的文字是否相同，如果不相同，就将输入的文字变红。

思路

最重要的是思路，最早的想法是用表格，每个字占一个td，第一行(奇数行)放文字，第二行(偶数行)放input标签。然后将input输入的内容与第一行的比较。

字

字

字

后来在写代码的时候发现这样写非常费力。要找到每个input输入的值并要与上一行对应的文字比较，太难了，几乎难以实现。

于是将文字与输入框当作一个组件，去比较输入的文字与提示文字是否一致，这样代码就好写多了。

创建工程

使用 vue ui 创建vue工程

创建 文字Char.vue 组件

{ { cw }}

export default {

name: 'Char',

props: {

word: String

},

computed: {

cw(){

if(this.word == ''){

return ';nbsp'

}else{

return this.word;

}

}

},

data(){

return {

inputChar: '',