用vue写一个填空题录入界面
时间: 2023-06-19 12:07:52 浏览: 703
好的,下面是一个简单的填空题录入界面的Vue代码示例:
```
<template>
<div>
<h2>填空题录入</h2>
<form>
<div class="form-group">
<label>题目:</label>
<input type="text" class="form-control" v-model="question.title">
</div>
<div class="form-group">
<label>问题描述:</label>
<textarea class="form-control" rows="3" v-model="question.description"></textarea>
</div>
<div class="form-group">
<label>答案:</label>
<input type="text" class="form-control" v-model="question.answer">
</div>
<button type="button" class="btn btn-primary" @click="saveQuestion">保存</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
question: {
title: '',
description: '',
answer: ''
}
}
},
methods: {
saveQuestion() {
// 保存填空题数据到服务器
console.log(this.question);
}
}
}
</script>
```
这个示例代码包含了一个简单的表单,其中包含题目、问题描述和答案三个字段,并且有一个保存按钮。在用户填写完表单后,点击保存按钮会触发saveQuestion方法,可以在这个方法中将填空题数据保存到服务器中。
阅读全文