【发布时间】：2020-11-07 06:43:45
【问题描述】：
我想创建一个简单的游戏帮助孩子阅读，其实是一种语言学习方法，叫做“静音模式”，反正这是jsfiddle链接
https://jsfiddle.net/raminSafari/b7zhc98q/19/
例如，如果我希望学生首先阅读“笔”，我指向 p(1)，然后指向 e(2)，最后指向 n(3)，代码适用于具有唯一字母的单词，但是当单词类似于“爸爸”，它没有按我想要的方式工作，我希望它显示 d(1)(3), a(2)
这是完整的简化代码（我知道它不可靠）
<template>
<div class = "container pt-5 mt-5">
<h1 class="text-center pb-5"><span style="color: red;"> {{ answer }} </span> just to clarify</h1> <!-- just to clarify -->
<div class="text-center">
<template id="keyboard" v-for="alphabet in alphabets" >
<template v-if = "alphabet == word.first ">
<span :class="{ 'active': firstActive, alphabet}"> {{ alphabet }} </span> <strong style="color: red; font-size: 10px;">{{ num1 }}</strong>
</template>
<template v-else-if = "alphabet == word.second ">
<span :class="{ 'active': secondActive, alphabet}"> {{ alphabet }} </span> <strong style="color: red; font-size: 10px;">{{ num2 }}</strong>
</template>
<template v-else-if = "alphabet == word.third ">
<span :class="{ 'active': thirdActive, alphabet}"> {{ alphabet }} </span> <strong style="color: red; font-size: 10px;">{{ num3 }}</strong>
</template>
<template v-else-if = "alphabet == word.forth ">
<span :class="{ 'active': forthActive, alphabet}"> {{ alphabet }} </span> <strong style="color: red; font-size: 10px;">{{ num4 }}</strong>
</template>
<template v-else-if = "alphabet == word.fifth ">
<span :class="{ 'active': forthActive, alphabet}"> {{ alphabet }} </span> <strong style="color: red; font-size: 10px;">{{ num5 }}</strong>
</template>
<template v-else>
<span class="alphabet"> {{ alphabet }} </span>
</template>
</template>
<div><button class = "btn btn-info mt-3" @click = "again">again</button></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
alphabets: ["p", "e", "m", "n", "d", "a", "s"],
firstActive: false,
secondActive: false,
thirdActive: false,
forthActive: false,
fifthActive: false,
index: 0,
words:[
{
first: 'p',
second: 'e',
third: 'n',
forth: '',
fifth: '',
answer : 'pen'
},
{
first: 'm',
second: 'a',
third: 'd',
forth: 'e',
fifth: '',
answer : 'made'
},
{
first: 'd',
second: 'a',
third: 'd',
forth: '',
fifth: '',
answer : 'dad'
},
],
word: [],
answer: '',
myVar1: null,
myVar2: null,
myVar3: null,
myVar4: null,
myVar5: null,
num1: '',
num2: '',
num3: '',
num4: '',
num5: ''
}
},
methods: {
shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
},
getWord(){
this.word = this.words[this.index];
this.answer = this.word.answer;
},
again(){
clearTimeout(this.myVar1);
clearTimeout(this.myVar2);
clearTimeout(this.myVar3);
clearTimeout(this.myVar4);
clearTimeout(this.myVar5);
this.firstActive = false;
this.secondActive = false;
this.thirdActive = false;
this.forthActive = false;
this.fifthActive = false;
this.num1 = '';
this.num2 = '';
this.num3 = '';
this.num4 = '';
this.num5 = '';
if(this.index == this.words.length){
this.index = 0;
}else{
this.index++;
}
this.getWord();
this.showBorder();
},
showBorder(){
this.myVar1 = setTimeout(() => {
this.firstActive = true;
this.num1 = 1;
}, 2000);
this.myVar2 = setTimeout(() => {
this.secondActive = true;
this.num2 = 2;
}, 4000);
this.myVar3 = setTimeout(() => {
this.thirdActive = true;
this.num3 = 3;
}, 6000);
this.myVar4 = setTimeout(() => {
this.forthActive = true;
this.num4 = 4;
}, 8000);
this.myVar5 = setTimeout(() => {
this.fifthActive = true;
this.num5 = 5;
}, 10000);
}
},
created(){
this.words = this.shuffle(this.words);
this.getWord();
this.showBorder();
}
}
</script>
<style>
span.alphabet{
display: inline-block;
width: 70px;
height: 70px;
font-size: 30px;
font-weight: 600;
}
.active{
border: 2px solid red;
border-radius: 50%;
}
</style>
谢谢
【问题讨论】：
标签： vue.js vuejs2 vue-class-components