首先这个是项目要求https://pro.modao.cc/app/yYrFSrhbpUkSjrOCYpKg9iO6d2PPFGo
这个是数据
const data =[
{
lv:'美国学前',
level:'L1',
theWords:['see','play', 'me','at','run','go','and','look','can','here'],
stuAnswer:''
},
{
lv:'美国学前',
level:'L2',
theWords:['you','come','not','with','jump','help','is','work','are','this'],
stuAnswer:''
},
{
lv:'美国小学1年级',
level:'L3',
theWords:['road','live','thank','when','bigger','how','always','night','spring','today'],
stuAnswer:''
}
]
这是我目前写的代码
<template>
<div class="home">
<p class="title">请点击选出自己认识的单词</p>
<checker
v-for="(item, index) in items"
v-if="index == 0"
@click.native="checker(index)"
class="check-box"
v-model="demo"
type="checkbox"
default-item-class="demo1-item"
selected-item-class="demo1-item-selected"
>
<checker-item
class="check-item"
v-for="(item2, index2) in item.theWords"
:value="item2"
@click.native="selected(item2,item.lv,item.level,index)"
>{{item2}}</checker-item>
</checker>
<x-button
class="submit"
type="primary"
ref="submit"
@click.native="submit"
link="/homeTwo"
>{{msg}}</x-button>
</div>
</template>
<script>
import {getHomeData} from '@/api/index';
export default {
name:'HomeOne',
data() {
return {
items:[],
demo:'',
msg:'都不认识'
}
},
props:{
value:{
type:String,
default:''
}
},
created() {
this.getData();
},
methods:{
getData() {
getHomeData().then(data => {
this.items = data;
})
},
selected(query,lv,level,index) {
if(lv) {
this.msg = '我选好了';
$('.submit').css('background-color','rgb(205, 165, 104)')
}
else {
this.msg = '都不认识';
$('.submit').css('background-color','rgb(217, 106, 107)')
}
},
submit() {
}
}
}
</script>
<style scoped>
.home{
width:100%;
}
.title{
width:100%;
display: block;
font-weight: bold;
text-align: center;
margin:50px 0;
}
.list{
width:100%;
margin-bottom: 20px;
}
.check-box{
display: flex;
justify-content: center;
align-items:center;
align-content:space-between;
flex-wrap: wrap;
}
.check-item{
margin:0 auto;
width:34%;
margin-bottom: 40px;
}
.demo1-item {
text-align: center;
border: 1px solid #ccc;
line-height: 1;
padding: 10px 0px;
border-radius: 5px;
background-color: #eee;
}
.demo1-item-selected {
background-color: rgb(139, 195, 74);
}
.submit{
width:83%;
font-size: 16px;
background-color: rgb(217, 106, 107);
}
.submit-selected{
background-color:rgb(205, 165, 104);
}
</style>
下面说说我的问题
1、要求只要有一个选中了下面的不认识就会变我选好了，然后我的是要点到第二个才会变，我改变的方式引用的jquery，能不能用vue的方式解决一下
2、当点击选好了会把你不认识的单词显示出来，点击按钮的时候怎么获取到clected里面的那些参数以及上面循环的那些
3、当认识9个以上的时候会出来下一套题， 我设置的index==0所以只出来第一套，要怎么获取到这个index以及当我点击了9个以上按了提交让index变为1出来下一套题
求高手帮我看看吧，这是我的第一个项目，研究了蛮久了，我可以给个小红包感谢，QQ405708338
相关分类