vue element實作前端頁面的答題（上一題下一題，判斷對錯，點擊指示符跳轉題目，根據對錯更改指示符顏色等功能）
直接進入正題，先來了解一下 Map,下邊網站可以了解更多
Map - JavaScript | MDN (mozilla.org)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 大家可以看一下代碼和上方網站了解一下 // set() 方法為 Map 物件添加或更新一個指定了鍵（key）和值（value）的（新）鍵值對， const map1 = new Map(); map1.set(1, 'one'); console.log(map1); map1.set(2,'two') console.log(map1); console.log('----------'); // 小伏筆，可以列印出來看看 const map2 = new Map(); const arr1 = ['a','b','c','d','e'] for (let i = 0; i < arr1.length; i++) { map2.set(i, arr1[i]) } console.log(map2); console.log('----------'); // get() 方法回傳某個 Map 物件中的一個指定元素， const map3 = new Map(); map3.set(3, 'Z'); map3.set(4,'X'); console.log(map3.get(3)); console.log(map3.get(4)); </script> </body> </html>
ok,現在進入編碼階段，最后的效果圖的話，會盡快補上
現在開始寫界面和樣式...,隨便搞搞就行..，貼上我的代碼，并加上資料，資料自己隨便改
<template> <div> <div class="main" style="width:1200px;height:800px;padding:10px;margin:0 auto;background-color:rgba(0,0,0,.2);"> <div class="main-left" style="width:790px;height:800px;background-color:rgba(0,0,0,.2);"> <div style="width:790px;height:500px;background-color:#fff;"> </div> <div style="width:790px;height:290px;background-color:#fff;"> </div> </div> <div class="main-right" style="width:400px;height:800px;background-color:#fff;"> </div> </div> </div> </template> <script> export default { name: 'Helloworld', data() { return { question:[ { analysis: '', answer: 'A', id: 1, name: '世界第一高峰（ ）m', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"}]' }, { analysis: '', answer: 'B', id: 2, name: '()口一頭豬?', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]' }, { analysis: '', answer: '123', id: 11, name: '我是_____,哈哈哈', value: '' }, { analysis: '', answer: 'true', id: 21, name: '今天吃奧里給了嗎？', value: '' }, { analysis: '', answer: '大蘇打蘇uuu大蘇打撒旦', id: 31, name: '請寫出所有中國公民的名字', value: '' }, ] }; }, mounted() { }, updated() { }, methods: { } }; </script> <style scoped> .main { display: flex; justify-content: space-between; } .main-left { display: flex; flex-direction: column; justify-content: space-between; } </style>
現在完成了，上一題，下一題，判斷對錯，記錄題目狀態，點擊試題總覽圓圈跳轉題目，答案的顯示隱藏等，，，后續會繼續將其他功能補全，，，并且會寫好注釋
<template> <div> <div class="main" style="width:1200px;height:800px;padding:10px;margin:0 auto;background-color:rgba(0,0,0,.2);"> <div class="main-left" style="width:790px;height:800px;background-color:rgba(0,0,0,.2);"> <div style="width:750px;height:460px;background-color:#fff;padding:20px;"> <div v-if="question[start].type === 1"> <div>一 . 選擇題</div> <div>{{start+1}} . {{question[start].name}}</div> <div> <el-radio-group v-model="answerBuff" @change="selectanswer"> <div v-for="(item,index) in JSON.parse(question[start].value)" :key="index"> <el-radio style="margin-top:15px;" :disabled = selectradio :label="item.key"><span>{{item.key}} . {{item.value}}</span></el-radio> </div> </el-radio-group> </div> </div> <div style="width:50%;margin:150px auto; 0"> <el-button type="primary" @click="upquestion">上一題</el-button> <el-button type="primary" @click="nextquestion">下一題</el-button> <!-- <el-button type="primary" >提交答案</el-button> --> </div> </div> <div style="width:790px;height:290px;background-color:#fff;"> <div v-show="showanswer"> <div> <h3 :style="{'color': answerBuff === question[start].answer? 'blue' : 'red'}"> {{answerBuff === question[start].answer? '正確': '錯誤'}} <span style="margin-left:20px;color:blue;" > 正確答案是: {{(question[start].answer)}} </span> </h3> <span><strong>決議 : </strong>{{question[start].analysis? question[start].analysis : '決議暫無'}}</span> </div> </div> </div> </div> <!-- 總覽 --> <div class="main-right" style="width:400px;height:800px;background-color:#fff;"> <h3 style="text-align:center;">試題總覽</h3> <div class="tip" style="display:flex;justify-content:space-evenly;"> <div><div style="width:20px;height:20px;display:inline-block;border-radios:50%;background-color:red;border-radius: 50%;vertical-align: bottom;"></div><span>錯誤</span></div> <div><div style="width:20px;height:20px;display:inline-block;border-radios:50%;background-color:blue;border-radius: 50%;vertical-align: bottom;"></div><span>正確</span></div> <div><div style="width:19px;height:19px;display:inline-block;border: 1px solid black;border-radios:50%;background-color:#fff;border-radius: 50%;vertical-align: bottom;"></div><span>未答</span></div> </div> <div class="clearfix" style="margin-top:20px;"> <div>一、選擇題</div> <p>點擊指示符可跳轉題目</p> <div v-for="(item, index) in question" :key="index"> <div v-if="item.type === 1" @click="clickchange(index)" style="margin-left: 10px;text-align: center; float: left; width: 30px; height: 30px; line-height: 30px;border-radius: 50%; border: 1px solid gainsboro;">{{index+1}}</div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Helloworld', data() { return { start: 0, answers: new Map(), answerBuff: '', // 所有的型別題目的答案都綁它 selectradio: false, showanswer: false, question:[ // type 1 選擇 2 填空，3，判斷，4 簡答 { analysis: '', answer: 'A', type: 1, id: 1, name: '世界第一高峰（ ）m', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"}]' }, { analysis: '', answer: 'B', id: 2, type:1, name: '()口一頭豬?', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]' }, { analysis: '', answer: 'B', id: 3, type:1, name: '()口一頭牛?', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]' }, { analysis: '', answer: 'B', id: 4, type:1, name: '()口一頭羊?', value: '[{"key":"A","value":"10 "},{"key":"B","value":"15"},{"key":"C","value":"20"},{"key":"D","value":"120"}]' }, { analysis: '', answer: '123', id: 11, type: 2, name: '我是_____,哈哈哈', value: '' }, { analysis: '', answer: 'true', id: 21, type: 3, name: '今天吃奧里給了嗎？', value: '' }, { analysis: '', answer: '大蘇打蘇uuu大蘇打撒旦', id: 31, type: 4, name: '請寫出所有中國公民的名字', value: '' }, ] }; }, mounted() { }, updated() { }, methods: { core () { this.answerBuff = this.answers.get(this.start) if (this.answers.get(this.start) === undefined) { this.showanswer = false } else { this.showanswer = true } }, upquestion () { this.start-- this.core() }, nextquestion () { this.start++ this.core() }, selectanswer (val) { this.answers.set(this.start, val) this.showanswer = true }, clickchange (index) { // 點擊指示符跳轉題目 this.start = index this.core() }, } }; </script> <style scoped> .clearfix:after { content:""; display: block; clear:both; } .main { display: flex; justify-content: space-between; } .main-left { display: flex; flex-direction: column; justify-content: space-between; } </style>
目前的效果，后續功能還會繼續添加，今天有些困了，喜歡的話，請給我點贊吧，謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/344268.html
標籤：其他
上一篇：Node.js快速入門
下一篇：JavaScript基礎（1）