uniapp 写一个可以进行多样化编辑的调查问卷代码
时间: 2023-12-25 12:06:38 浏览: 32
好的,以下是一个基于uniapp的多样化编辑调查问卷的代码示例:
```html
<template>
<view>
<form>
<view v-for="(question, index) in questions" :key="index">
<view>
<text>{{question.title}}</text>
</view>
<view>
<template v-if="question.type==='text'">
<input type="text" v-model="question.answer" />
</template>
<template v-else-if="question.type==='textarea'">
<textarea v-model="question.answer" />
</template>
<template v-else-if="question.type==='radio'">
<label v-for="(option, i) in question.options" :key="i">
<input type="radio" :name="'q'+index" :value="option" v-model="question.answer" />
{{option}}
</label>
</template>
<template v-else-if="question.type==='checkbox'">
<label v-for="(option, i) in question.options" :key="i">
<input type="checkbox" :name="'q'+index" :value="option" v-model="question.answer" />
{{option}}
</label>
</template>
<template v-else-if="question.type==='select'">
<select v-model="question.answer">
<option v-for="(option, i) in question.options" :key="i" :value="option">{{option}}</option>
</select>
</template>
</view>
</view>
<button type="submit" @click.prevent="submit">提交</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
questions: [
{
title: "您的姓名是?",
type: "text",
answer: ""
},
{
title: "您的年龄是?",
type: "text",
answer: ""
},
{
title: "您的性别是?",
type: "radio",
options: ["男", "女"],
answer: ""
},
{
title: "您的职业是?",
type: "select",
options: ["学生", "工程师", "教师", "医生", "其他"],
answer: ""
},
{
title: "您喜欢的颜色是?",
type: "checkbox",
options: ["红色", "蓝色", "绿色", "黄色", "紫色"],
answer: []
},
{
title: "您的建议是?",
type: "textarea",
answer: ""
}
]
};
},
methods: {
submit() {
// 在这里提交问卷数据
console.log(this.questions);
}
}
};
</script>
```
这里我们通过使用v-if、v-else-if和v-for指令,实现了针对不同类型问题的不同输入方式,例如单选框、多选框、下拉框、文本输入框和文本域等。同时,我们通过使用v-model指令,将用户输入的数据双向绑定到了questions数组中,方便后续提交数据时使用。最后,在提交数据时,我们可以通过console.log方法将数据输出到控制台,以方便调试。