uniAPP写一个可编辑的调查问卷代码
时间: 2023-12-01 18:09:29 浏览: 37
以下是一个简单的可编辑调查问卷的示例代码,基于uniAPP框架:
```html
<template>
<div>
<div v-for="(question, index) in questions" :key="index">
<div>{{ question.label }}</div>
<div v-if="question.type === 'text'">
<input type="text" v-model="question.answer">
</div>
<div v-else-if="question.type === 'radio'">
<div v-for="(option, optionIndex) in question.options" :key="optionIndex">
<input type="radio" :value="option" v-model="question.answer"> {{ option }}
</div>
</div>
<div v-else-if="question.type === 'checkbox'">
<div v-for="(option, optionIndex) in question.options" :key="optionIndex">
<input type="checkbox" :value="option" v-model="question.answer"> {{ option }}
</div>
</div>
<br>
</div>
<button @click="addQuestion">添加问题</button>
<button @click="submitAnswers">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
questions: [
{ label: "你的姓名", type: "text", answer: "" },
{ label: "你的性别", type: "radio", options: ["男", "女"], answer: "" },
{ label: "你的爱好", type: "checkbox", options: ["篮球", "足球", "游泳", "跑步"], answer: [] }
]
}
},
methods: {
addQuestion() {
this.questions.push({ label: "", type: "text", answer: "" })
},
submitAnswers() {
const answers = this.questions.map(question => {
return {
label: question.label,
answer: question.answer
}
})
console.log(answers)
}
}
}
</script>
```
这个示例中,我们创建了一个`questions`数组来存储所有的问题,每个问题包括问题名称、问题类型(文本、单选、多选)、选项(如果是单选或多选类型)和答案。我们使用`v-for`指令来循环显示所有的问题,并根据问题类型显示不同的输入框。我们还添加了两个按钮来添加新问题和提交答案。当点击“提交”按钮时,我们将所有的答案存储在一个新的数组中,并在控制台中输出。
这只是一个简单的示例代码,你可以根据自己的需求进行更改和扩展。