文章目錄
目錄
系列文章目錄
1.《Vue3實戰》使用axios獲取文件數據以及走馬燈Element plus的運用
2.《Vue3實戰》用路由實現跳轉登錄、退出登錄以及路由全局守護
3.《vue3實戰》運用Checkbox復選框實現單選多選的試卷展現(本文)
文章目錄
前言
radio是什么?
raido的作用體現在以下幾個方面:
Checkbox是什么?
Checkbox的作用體現在以下幾個方面:
一、制作試卷需要注意什么?
在運用Checkbox制作試卷時,需要注意以下幾點:
二、單選題、多選題的實現方法
1.單選題的實現方法
2.多選題的實現方法
三、最終效果圖
1.單選題效果圖如下:
?2.多選題效果圖如下:
四、 所有代碼如下
總結
前言
radio是什么?
單選按鈕(Radio Button)是一種常見的HTML表單元素,用于讓用戶在一組選項中選擇單個選項。每個單選按鈕通常與一個相關的文本標簽相連,以便用戶知道每個選項的含義。
raido的作用體現在以下幾個方面:
-
單選: 單選按鈕允許用戶只能選擇其中一個選項,即同一組單選按鈕只能有一個被選中。
-
表單提交: 單選按鈕的值可以與表單一起提交,以便在服務器端進行處理。通常,與被選中的單選按鈕相關的值將作為參數傳遞給后端進行處理。
-
數據篩選: 單選按鈕可以用于數據篩選,例如在一個調查問卷中,提供多個選項供用戶選擇,用戶只能選擇其中一個作為回答。
-
選項說明: 每個單選按鈕通常都與一個文本標簽相連,用于說明選項的含義。這樣用戶可以更容易理解每個選項的意思。
-
用戶界面控制: 單選按鈕也可以用來控制用戶界面的可見性或可操作性。根據用戶選擇的不同,可以顯示或隱藏其他元素,或者啟用或禁用其他控件
Checkbox是什么?
Checkbox(復選框)是一種常見的HTML表單元素,用于讓用戶在一組選項中選擇一個或多個選項
Checkbox的作用體現在以下幾個方面:
-
多選: Checkbox 允許用戶選中一個或多個選項,用于從多個選項中進行多項選擇。
-
表單提交: Checkbox 的值可以與表單一起提交,以便在服務器端進行處理。例如,可以將選中的Checkbox的值作為參數傳遞給后端,進行相關的業務邏輯。
-
數據篩選: Checkbox 可以用于數據篩選,例如在一個商品列表中,用戶可以勾選多個Checkbox來選擇和篩選需要的商品。
一、制作試卷需要注意什么?
在運用Checkbox制作試卷時,需要注意以下幾點:
-
呈現選項: 在試卷中,每個題目通常會提供多個選項供選擇,可以將每個選項用Checkbox表示,讓用戶選擇。
-
單選或多選: 根據題目的要求,確定是單選還是多選。如果是單選題,需要設置Checkbox的屬性,使得只能選擇一個選項。
-
默認選中: 對于已經有答案的試卷,可以根據答案的選擇情況,將正確選項默認選中,方便用戶參考。
-
選項排列: 試卷的選項排列可以根據需要進行調整,例如使用表格布局,或者垂直排列等。
-
顯示狀態: 可以根據用戶的選擇狀態,對選項進行樣式的標識,例如選中的選項可以用不同的背景色或勾選圖標進行標記。
二、單選題、多選題的實現方法
1.單選題的實現方法
單選題需要運用到type=“radiao”的單選按鈕來實現,利用value的值來判斷答案的對錯,需要注意的是:這道單選題中所有的選項都統一綁定同一個變量,也就是一道題所有選項中v-model=“”中“”里面的變量要是一樣的。
單選題代碼截圖如下:
2.多選題的實現方法
多選題需要運用到type=“checkbox”的復選框來實現,同樣也是利用value的值進行對錯的判斷。需要注意的是:多選題和單選題的不同之處在于,多選題每個選項中需要綁定不同的變量,也就是一道題所有選項中v-model=“”中“”里面的變量要是不同的。
多選題代碼截圖如下:
三、最終效果圖
1.單選題效果圖如下:
?2.多選題效果圖如下:
四、 所有代碼如下
<template>
<div style=" width: 100%;height: 650px;background-color: deepskyblue;border: 2px red solid"><div style="height: 600px;width: 400px;background-color: aliceblue;margin-left: 550px"><br><br><h1>{{"多選題"}}</h1><br><div><h3 style="text-align: center; ">{{question}}</h3><br><br><input type="checkbox" id="checkbox" value="錯誤" v-model="checkedOne"><label for="checkbox">A: 工信部 {{checkedOne}}</label><br><br><input type="checkbox" id="checkbox" value="錯誤" v-model="checkedTwo"><label for="checkbox">B:公安部{{checkedTwo}}</label><br><br><input type="checkbox" id="checkbox" value="正確" v-model="checkedThree"><label for="checkbox">C:國資委{{checkedThree}}</label><br><br><input type="checkbox" id="checkbox" value="正確" v-model="checkedFour"><label for="checkbox">D:網信辦{{checkedFour}}</label><br><br></div></div></div><div style=" justify-content: center;width: 100%;height: 650px;background-color: deepskyblue;border: 2px red solid"><div style="height: 600px;width: 400px;background-color: aliceblue;margin-left: 550px"><br><br><h1>{{"單選題"}}</h1><br><div ><h3 style="text-align: center; ">{{questionTwo}}</h3></div><div><br><br><input type="radio" id="codeA" value="A正確" v-model="picked"><label for="codeA">A: 公信部</label><br><br><br><input type="radio" id="codeB" value="B錯誤" v-model="picked"><label for="codeB">B: 公安部</label><br><br><br><input type="radio" id="codeC" value="C錯誤" v-model="picked"><label for="codeC">C: 國資委</label><br><br><br><input type="radio" id="codeD" value="D錯誤" v-model="picked"><label for="codeD">D: 網信辦</label><br><br><span>選項: {{ picked }}</span></div></div></div>
</template><script>
export default{name: 'TestPaper',data(){return{nextPage:">",lastPage:"<",question:" 某軟件技術公司,主營業務為軟件項目研發和交付,公司項目經理均為軟件項目經理.為擴大發展,公司承接了一個技術改造項目,涉及到硬件的升級和更新及相關軟件的開發和部署.關于新項目經理的人選,合適的是()\n ",questionTwo:"( )依照《中華人民共和國數據安全法》和有關法律、行政法規的規定,負責統籌協調網絡數據安全和相關監管工作。\n",selected:2,checkedOne:[],checkedTwo:[],checkedThree:[],checkedFour:[],picked : '',news:{title:"平衡計分卡(BAC)是一種基于戰略管理的業績考評工具。從()四個方面形成一套完整的績效指標評價體系。\n",date: "2023年08月01日 15:51",position:"中國新聞網",content:""}}}
}</script><style scoped></style>
總結
? ?radio單選按鈕和Checkbox復選框都是制作試卷很方便的好工具好方法,單選按鈕還有的作用是讓用戶在一組選項中選擇一個選項,并將其值作為表單數據傳遞給后端進行處理。它可以用于數據篩選、選項說明以及用戶界面控制等方面。
? 我們在使用Checkbox制作試卷時,需要合理的使用多選和單選來表示不同類型的題目,并且在答題時需要考慮選項的排列和校驗答案的邏輯。
? ?希望這篇博客能給各位朋友們帶來幫助,最后請來過的朋友們留下你們寶貴的三連以及關注,感謝你們!