《vue3實戰》運用radio單選按鈕或Checkbox復選框實現單選多選的試卷制作

文章目錄

目錄

系列文章目錄

1.《Vue3實戰》使用axios獲取文件數據以及走馬燈Element plus的運用

2.《Vue3實戰》用路由實現跳轉登錄、退出登錄以及路由全局守護

3.《vue3實戰》運用Checkbox復選框實現單選多選的試卷展現(本文)

文章目錄

前言

radio是什么?

raido的作用體現在以下幾個方面:

Checkbox是什么?

Checkbox的作用體現在以下幾個方面:

一、制作試卷需要注意什么?

在運用Checkbox制作試卷時,需要注意以下幾點:

二、單選題、多選題的實現方法

1.單選題的實現方法

2.多選題的實現方法

三、最終效果圖

1.單選題效果圖如下:

?2.多選題效果圖如下:

四、 所有代碼如下

總結


前言

radio是什么?

單選按鈕(Radio Button)是一種常見的HTML表單元素,用于讓用戶在一組選項中選擇單個選項。每個單選按鈕通常與一個相關的文本標簽相連,以便用戶知道每個選項的含義。

raido的作用體現在以下幾個方面:

  1. 單選: 單選按鈕允許用戶只能選擇其中一個選項,即同一組單選按鈕只能有一個被選中。

  2. 表單提交: 單選按鈕的值可以與表單一起提交,以便在服務器端進行處理。通常,與被選中的單選按鈕相關的值將作為參數傳遞給后端進行處理。

  3. 數據篩選: 單選按鈕可以用于數據篩選,例如在一個調查問卷中,提供多個選項供用戶選擇,用戶只能選擇其中一個作為回答。

  4. 選項說明: 每個單選按鈕通常都與一個文本標簽相連,用于說明選項的含義。這樣用戶可以更容易理解每個選項的意思。

  5. 用戶界面控制: 單選按鈕也可以用來控制用戶界面的可見性或可操作性。根據用戶選擇的不同,可以顯示或隱藏其他元素,或者啟用或禁用其他控件

Checkbox是什么?

Checkbox(復選框)是一種常見的HTML表單元素,用于讓用戶在一組選項中選擇一個或多個選項

Checkbox的作用體現在以下幾個方面:

  1. 多選: Checkbox 允許用戶選中一個或多個選項,用于從多個選項中進行多項選擇。

  2. 表單提交: Checkbox 的值可以與表單一起提交,以便在服務器端進行處理。例如,可以將選中的Checkbox的值作為參數傳遞給后端,進行相關的業務邏輯。

  3. 數據篩選: Checkbox 可以用于數據篩選,例如在一個商品列表中,用戶可以勾選多個Checkbox來選擇和篩選需要的商品。


一、制作試卷需要注意什么?

在運用Checkbox制作試卷時,需要注意以下幾點:

  1. 呈現選項: 在試卷中,每個題目通常會提供多個選項供選擇,可以將每個選項用Checkbox表示,讓用戶選擇。

  2. 單選或多選: 根據題目的要求,確定是單選還是多選。如果是單選題,需要設置Checkbox的屬性,使得只能選擇一個選項。

  3. 默認選中: 對于已經有答案的試卷,可以根據答案的選擇情況,將正確選項默認選中,方便用戶參考。

  4. 選項排列: 試卷的選項排列可以根據需要進行調整,例如使用表格布局,或者垂直排列等。

  5. 顯示狀態: 可以根據用戶的選擇狀態,對選項進行樣式的標識,例如選中的選項可以用不同的背景色或勾選圖標進行標記。

二、單選題、多選題的實現方法

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制作試卷時,需要合理的使用多選和單選來表示不同類型的題目,并且在答題時需要考慮選項的排列和校驗答案的邏輯。

? ?希望這篇博客能給各位朋友們帶來幫助,最后請來過的朋友們留下你們寶貴的三連以及關注,感謝你們!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/39763.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/39763.shtml
英文地址,請注明出處:http://en.pswp.cn/news/39763.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java中List排序的4種方法

開發過程中經常會遇到讀取文件內容的情況&#xff0c;需要判斷文件是否為文本文件&#xff0c;及文件編碼格式&#xff0c;防止無法讀取內容或亂碼出現情況。 我們可以通過 java.io.File 類包找出文件是目錄還是常規文件。java.io.File 類包含兩種方法&#xff0c;它們分別是&…

TCP服務器—實現數據通信

目錄 前言 1.接口介紹 2.編寫服務器 3.編寫客戶端 4.編譯鏈接 5.測試 6.總結 前言 今天我們要介紹的是使用TCP協議實現數據通信&#xff0c;相比于之前寫的UDP服務器實現數據信&#xff0c;在主體邏輯上并沒有差別。客戶端向服務器發送信息&#xff0c;服務器接受信息并回…

JavaEE初階:多線程 - Thread 類的基本用法

上次我們了解了多線程的五種創建方法&#xff0c;今天來學習Thread的基本用法。 目錄 run和start Thread常見的構造方法 Thread的幾個常見屬性 后臺線程 是否存活 線程終止 1.使用標志位 2.使用Thread自帶的標志 等待線程 run和start 首先需要理解Thread的run和star…

JavaWeb-Listener監聽器

目錄 監聽器Listener 1.功能 2.監聽器分類 3.監聽器的配置 4.ServletContext監聽 5.HttpSession監聽 6.ServletRequest監聽 監聽器Listener 1.功能 用于監聽域對象ServletContext、HttpSession和ServletRequest的創建&#xff0c;與銷毀事件監聽一個對象的事件&#x…

Python源碼05:使用Pyecharts畫詞云圖圖

**Pyecharts是一個用于生成 Echarts 圖表的 Python 庫。Echarts 是一個基于 JavaScript 的數據可視化庫&#xff0c;提供了豐富的圖表類型和交互功能。**通過 Pyecharts&#xff0c;你可以使用 Python 代碼生成各種類型的 Echarts 圖表&#xff0c;例如折線圖、柱狀圖、餅圖、散…

Glide 的超時控制相關處理

作者&#xff1a;newki 前言 Glide 相信大家都不陌生&#xff0c;各種源碼分析&#xff0c;使用介紹大家應該都是爛熟于心。但是設置 Glide 的超時問題大家遇到過沒有。 我遇到了&#xff0c;并且掉坑里了&#xff0c;情況是這樣的。 調用接口從網絡拉取用戶頭像&#xff0c…

3.微服務概述

1.大型網絡架構變遷 SOA與微服務最大的差別就是服務拆分的細度&#xff0c;目前大多數微服務實際上是SOA架構&#xff0c;真正的微服務應該是一個接口對應一個服務器&#xff0c;開發速度快、成本高&#xff1b; 微服務SOA能拆分的就拆分是整體的&#xff0c;服務能放一起的都…

自動駕駛HMI產品技術方案

版本變更 序號 日期 變更內容 編制人 審核人 文檔版本 1 2 1.

【計算機網絡】13、ARP 包:廣播自己的 mac 地址和 ip

機器啟動時&#xff0c;會向外廣播自己的 mac 地址和 ip 地址&#xff0c;這個即稱為 arp 協議。范圍是未經過路由器的部分&#xff0c;如下圖的藍色部分&#xff0c;范圍內的設備都會在本地記錄 mac 和 ip 的綁定信息&#xff0c;若有重復則覆蓋更新&#xff08;例如先收到 ma…

【Spring】深入理解 Spring 事務及其傳播機制

文章目錄 一、Spring 事務是什么二、Spring 中事務的實現方法2.1 Spring 編程式事務&#xff08;手動&#xff09;2.1.1 編程式事務的使用演示2.1.2 編程式事務存在的問題 2.2 Spring 聲明式事務&#xff08;自動&#xff09;2.2.1 Transactional 作用范圍2.2.2 Transactional …

騰訊云GPU服務器GN7實例NVIDIA T4 GPU卡

騰訊云GPU服務器GN7實例搭載1顆 NVIDIA T4 GPU&#xff0c;8核32G配置&#xff0c;系統盤為100G 高性能云硬盤&#xff0c;自帶5M公網帶寬&#xff0c;系統鏡像可選Linux和Windows&#xff0c;地域可選廣州/上海/北京/新加坡/南京/重慶/成都/首爾/中國香港/德國/東京/曼谷/硅谷…

安卓純代碼布局開發游戲二:Android Studio開發環境搭建

1.Android Studio下載&#xff1a; Download Android Studio & App Tools - Android Developers 2.安裝 安裝過程非常簡單&#xff0c;找到下載包&#xff0c;一直點Next即可。 3.下載Android SDK 第一次進入Android Studio默認會先下載Android SDK,筆者下載的Android SDK存…

零售行業供應鏈管理核心KPI指標(三)

完美訂單滿足率和退貨率 完美訂單滿足率有三個方面的因素影響&#xff1a;訂單按時、足量、無損交貨。通常情況下零售企業追求線上訂單履行周期慢慢達到行業平均水平&#xff0c;就是交付的速度變快了&#xff0c;這個肯定是一件好事情&#xff0c;趨勢越來越好。 同時&#…

歐拉公式

文章目錄 歐拉公式e歐拉恒等式歐拉公式歐拉公式 推導2步驟1: 使用泰勒級數展開步驟2: 將 i x i x ix 代入 e x e^x ex 復平面上推導歐拉公式步驟1&#xff1a;復平面上的復數表示步驟2&#xff1a;定義復數的指數形式步驟3&#xff1a;求導步驟4&#xff1a;連接兩種形式步驟…

ubuntu安裝opencv4

apt 安裝 sudo apt install libopencv-dev python3-opencvpkg-config查看安裝 sudo apt install pkg-configpkg-config --modversion opencv4pkg-config --libs --cflags opencv4參考 如何在 Ubuntu 20.04 上安裝 OpenCV pkg-config 詳解

spark yarn 開啟動態資源分配

概念 不需要指定并發&#xff0c;只需要指定內存&#xff0c; 程序在運行后會動態調節并發數量&#xff0c;我們只需要設置一個上線即可 在spark 配置文件設置&#xff1a; spark.dynamicAllocation.enabled true spark.shuffle.service.enabled true 準備shuffer jar 將spar…

星際爭霸之小霸王之小蜜蜂(一)

目錄 前言 一、安裝pygame庫 1、pygame庫簡介 2、在windows系統安裝pygame庫 二 、搭建游戲框架 1、創建游戲窗口 2、改變窗口顏色 總結 前言 大家應該都看過或者都聽說過python神書“大蟒蛇”&#xff0c;上面有一個案例是《外星人入侵》&#xff0c;游戲介紹讓我想起了上…

炫酷UI前端效果的CSS生成工具

提升設計人員和前端開發人員的工作 推薦炫酷UI前端效果的CSS生成工具1.Neumorphism2.帶有漸變的圖標3.Interactions4.大型數據庫5.動畫6.Mask7.動畫按鈕8. 自定義形狀分隔線9.背景圖案10. SVG波浪推薦炫酷UI前端效果的CSS生成工具 1.Neumorphism 地址:https://neumorphism.i…

【Nginx17】Nginx學習:目錄索引、字符集與瀏覽器判斷模塊

Nginx學習&#xff1a;目錄索引、字符集與瀏覽器判斷模塊 今天要學習的內容有幾個還是大家比較常見的&#xff0c;所以學習起來也不會特別費勁。對于目錄的默認頁設置大家都不會陌生&#xff0c;字符集的設置也比較常見&#xff0c;而瀏覽器的判斷這一塊&#xff0c;可能有同學…

深入源碼分析kubernetes informer機制(二)Reflector

[閱讀指南] 這是該系列第二篇 基于kubernetes 1.27 stage版本 為了方便閱讀&#xff0c;后續所有代碼均省略了錯誤處理及與關注邏輯無關的部分。 文章目錄 Reflector是什么整體結構工作流程list拉取數據緩存resync操作watch監聽操作 總結 Reflector是什么 reflector在informer…