以下是 构建一个防诈骗测试页面的完整代码实现，包含单选题功能，并可记录用户选择的答案，所有功能均基于 Vue2 实现：
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防诈骗测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header h2 {
margin: 0;
font-size: 1.2rem;
}
.header .progress {
font-size: 0.9rem;
color: #666;
}
.question {
margin-bottom: 20px;
}
.question p {
font-size: 1rem;
font-weight: bold;
margin: 0 0 10px;
}
.options {
list-style: none;
padding: 0;
}
.options li {
margin-bottom: 10px;
}
.options input[type="radio"] {
display: none;
}
.options label {
display: block;
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.options input[type="radio"]:checked + label {
background: #d1e7dd;
border-color: #198754;
}
.confirm-button {
display: block;
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
text-align: center;
}
.confirm-button:disabled {
background: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<!-- Header -->
<div class="header">
<h2>防诈骗测试</h2>
<p class="progress">{{ currentQuestion + 1 }}/{{ questions.length }}</p>
</div>
<!-- Question -->
<div class="question">
<p>{{ questions[currentQuestion].text }}</p>
</div>
<!-- Options -->
<ul class="options">
<li v-for="(option, index) in questions[currentQuestion].options" :key="index">
<input
type="radio"
:id="'option' + index"
:value="option"
v-model="selectedAnswer"
>
<label :for="'option' + index">{{ option }}</label>
</li>
</ul>
<!-- Confirm Button -->
<button
class="confirm-button"
:disabled="!selectedAnswer"
@click="confirmAnswer"
>
{{ currentQuestion === questions.length - 1 ? '提交' : '确认' }}
</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
questions: [
{
text: '想找兼职的小刘看到一则网络刷单招聘，对方说，每刷一单，至少有15块钱的收入，每天至少可以赚百元以上。小刘应该怎么做？',
options: [
'常见诈骗手段，立即报警',
'这种赚钱方式真神奇，赶快去申请',
'点开链接去看看日赚百元秘籍',
'发现致富之道，并介绍朋友一起做'
]
},
{
text: '有人通过社交平台联系你，声称自己是“高富帅”，并以各种理由向你借钱，你应该如何处理？',
options: [
'直接报警处理',
'告诉对方自己没钱',
'对方看起来不错，可以尝试帮助',
'拉黑对方并举报账号'
]
},
{
text: '接到自称某机构的电话，称你中奖了一部手机，但需要缴纳邮费，你会怎么做？',
options: [
'直接挂断电话',
'支付邮费后拿到手机',
'尝试与对方核实信息',
'点击对方发送的链接填写信息'
]
}
],
currentQuestion: 0,
selectedAnswer: null,
answers: []
},
methods: {
confirmAnswer() {
// 记录答案
this.answers.push(this.selectedAnswer);
this.selectedAnswer = null;
// 如果是最后一题，提交答案
if (this.currentQuestion === this.questions.length - 1) {
alert('测试完成！您的答案已提交。');
console.log('用户答案：', this.answers);
} else {
// 否则进入下一题
this.currentQuestion++;
}
}
}
});
</script>
</body>
</html>
功能特点
-
多选题功能：
- 每道题支持单选，并自动记录用户的选择。
- 用户必须选择答案后才能点击确认按钮。
-
进度显示：
- 页面顶部显示当前题目编号和总题目数，实时更新。
-
响应式设计：
- 选项按钮的样式随用户选择动态变化，选中状态下会高亮显示。
-
假数据：
- 提供了多道题目和选项内容，内容与实际防诈骗场景相关。
-
提交逻辑：
- 用户答完所有题后会弹窗提示，并在控制台打印答案记录。
标签：Vue2,问答,border,诈骗,background,font,margin,options From： https://blog.csdn.net/sky10100100/article/details/143958167