使用elementui写一个调查问卷前端代码
时间: 2023-09-08 14:10:45 浏览: 88
使用vue+elementUI+ThinkPHP开发的问卷调查系统.zip
好的,以下是一个简单的调查问卷前端代码:
```
<template>
<div class="survey-form">
<h1>{{ title }}</h1>
<form>
<div v-for="(question, index) in questions" :key="index">
<h2>{{ question.title }}</h2>
<p>{{ question.description }}</p>
<el-radio-group v-model="question.answer">
<el-radio v-for="(option, i) in question.options" :key="i" :label="option">{{ option }}</el-radio>
</el-radio-group>
</div>
<el-button type="primary" @click.prevent="submitForm">提交</el-button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
title: '调查问卷标题',
questions: [
{
title: '问题一',
description: '问题一的描述',
options: ['选项一', '选项二', '选项三'],
answer: ''
},
{
title: '问题二',
description: '问题二的描述',
options: ['选项四', '选项五', '选项六'],
answer: ''
}
]
}
},
methods: {
submitForm() {
// 处理表单提交
}
}
}
</script>
<style scoped>
.survey-form {
max-width: 800px;
margin: 0 auto;
}
</style>
```
这个代码使用了 Element UI 的组件(`<el-radio-group>` 和 `<el-radio>`)来实现选择题,还有一个提交按钮,点击提交按钮可以触发 `submitForm` 方法。你可以根据自己的需求修改问题的数量、选项数量等。
阅读全文