基于vue3的静态简易答题案例

最新推荐文章于 2024-05-21 14:15:14 发布

lvy路由器

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量131

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_75011313/article/details/132992768

版权

非常简单的练手案例直接上代码！

HTML:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moon</title>
    <link rel="stylesheet" href="./Moon.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="body">
        <div class="left" v-if="now<=9">
            <div class="back">
            </div>
            <div class="tit">
                已答对{{num}}题/10
            </div>
        </div>
        <div class="right"  v-if="now<=9">
            <template v-for="(item, index) in ques" :key="item.id">
                <div class="que" v-if="item.id==now">
                    {{item.que}}
                </div>
                <div class="anss" v-if="item.id==now">
                    <div class="ans" @click.once="ansA(index)" :style="obja">A:{{item.a}}</div>
                    <div class="ans" @click.once="ansB(index)" :style="objb" >B:{{item.b}}</div>
                    <div class="ans" @click.once="ansC(index)" :style="objc">C:{{item.c}}</div>
                    <div class="ans" @click.once="ansD(index)" :style="objd">D:{{item.d}}</div>
                </div>
            </template>
        </div>
        <div class="next" @click="next" v-if="now<=9">下一题-></div>
        <div class="com animate__backInDown" v-if="now>9&&num<9">
            中秋快乐！！！！！
        </div>
        <div class="rel" v-if="now>9&&num>9">
        </div>
    </div>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}
#body{
    background-color: #95b2f1;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left{
   width: 54vh;
   height: 40vh;
}
.back{
    width: 54vh;
    height: 30vh;
    background-image: url('./moon.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.tit{
    text-align: center;
    margin-top: 16px;
    font-size: large;
}
.right{
    width: 54vh;
    height: 40vh;
}
.right .que{
    width: 54vh;    
    height: 10vh;
    font-size: larger;
    text-align: center;
}
.anss{
    width: 54vh;
    height: 30vh;
}
.ans{
    cursor: pointer;
    margin: 12px;
    text-align: center;
    float: left;
    line-height: 50px;
    width: 170px;
    height: 50px;
    border-radius: 12px;
    background-color: #fff;
}
.next{
    cursor: pointer;
    text-align: center;
    line-height: 47px;
    width: 160px;
    height: 47px;
    background-color: #fff;
    border-radius: 16px;
    position: absolute;
    bottom: 140px;
}
.com{
    font-weight: 900;
    font-size: 45px;
}
.rel{
    width: 100%;
    height: 100%;
    background-image: url(https://img.3dmgame.com/uploads/images/news/20210924/1632477860_497872.jpg
    );
    background-size: cover;
}

JS:

<script>
    const app = Vue.createApp({
        data() {
            return {
                num: '0',
                now: '0',
                obja:{},
                objb:{},
                objc:{},
                objd:{},
        ques: [
            {
                id: '0',
                que: '传说中的嫦娥是吃了谁送的灵药才飞进广寒宫的?',
                a: '西王母',
                b: '东王母',
                c: '玉帝',
                d: '太白金星',
                ans: 'a'
            },
            {
                id: '1',
                que: '传说中的嫦娥，是谁的妻子?',
                a: '大舜',
                b: '后羿',
                c: '仓颉',
                d: '颛顼',
                ans: 'b'
            },
            {
                id: '2',
                que: '八月十五又称什么节?',
                a: '团圆节',
                b: '月饼节',
                c: '故乡节',
                d: '诗人节',
                ans: 'a'
            },
            {
                id: '3',
                que: '1+1=?',
                a: '1',
                b: '2',
                c: '3',
                d: '4',
                ans: 'b'
            },
            {
                id: '4',
                que: '在有关中秋的典故中，吴刚伐的是什么树?',
                a: '槐树',
                b: '桂树',
                c: '柳树',
                d: '杨树',
                ans: 'b'
            },
            {
                id: '5',
                que: '月饼最初是用来做什么的?',
                a: '馈赠亲友的礼物',
                b: '祭奉月神的祭品',
                c: '节日食品',
                d: '地方小吃',
                ans: 'b'
            },
            {
                id: '6',
                que: '以下哪个不是跟中秋节有关的传说?',
                a: '精卫填海',
                b: '吴刚伐桂',
                c: '玉兔捣药',
                d: '嫦娥奔月',
                ans: 'a'
            },
            {
                id: '7',
                que: '一下哪个不是中秋节的别称',
                a: '端月节',
                b: '月节',
                c: '团圆节',
                d: '八月节',
                ans: 'a'
            },
            {
                id: '8',
                que: '下面哪个不是中秋节的起源：',
                a: '秋报的遗俗',
                b: '嫦蛾奔月',
                c: '杨贵妃喜欢吃月饼',
                d: '朱元璋月饼起义',
                ans: 'c'
            },
            {
                id: '9',
                que: '小明的救祓少女在对手的回合吃了陨石然后又吃了颉颃请问他的场上还会剩下什么？',
                a: '陨石衍生物',
                b: '后场的魔陷',
                c: '玩家',
                d: '钝角',
                ans: 'a'
            },
        ]
    }
        },
    methods: {
        next(){
            if(this.now<=9){
            this.now++
            this.obja={}
            this.objb={}
            this.objc={}
            this.objd={}
            }else{
                console.log('完结');
            }
        },
        ansA(index){
            if (this.ques[index].ans == 'a') {
                this.num++
                this.obja.backgroundColor="aquamarine"
            }
            else{
                this.obja.backgroundColor="red"
            }
        },
        ansB(index){
            if (this.ques[index].ans == 'b') {
                this.num++
                this.objb.backgroundColor="aquamarine"
            }
            else{
                this.objb.backgroundColor="red"
            }
        },
        ansC(index){
            if (this.ques[index].ans == 'c') {
                this.num++
                this.objc.backgroundColor="aquamarine"
            }
            else{
                this.objc.backgroundColor="red"
            }
        },
        ansD(index){
            if (this.ques[index].ans == 'd') {
                this.num++
                this.objd.backgroundColor="aquamarine"
            }
            else{
                this.objd.backgroundColor="red"
            }
        },
    },
    }).mount("#body")
</script>