用Vue编写以下功能: 课程编号不需要输入,是自动生成的,规则:最后一个门课程编号+1。如果删除所有的 课程,编号从2023001开始。
时间: 2024-03-07 14:46:34 浏览: 20
好的,以下是一个简单的 Vue 组件示例代码,实现了课程编号的自动生成规则:
```html
<template>
<div>
<label for="course-name">课程名称:</label>
<input type="text" id="course-name" v-model="courseName" />
<br />
<label for="course-id">课程编号:</label>
<input type="text" id="course-id" v-model="courseId" readonly />
</div>
</template>
<script>
export default {
data() {
return {
courseName: "",
courseId: ""
};
},
created() {
// 在组件创建时,获取最后一个门课程编号,如果没有课程则从2023001开始
const lastId = localStorage.getItem("lastCourseId");
if (lastId) {
this.courseId = parseInt(lastId) + 1;
} else {
this.courseId = 2023001;
}
},
watch: {
// 监听课程名称的变化,如果课程名称不为空,则更新课程编号
courseName(newVal) {
if (newVal) {
localStorage.setItem("lastCourseId", this.courseId);
this.courseId = parseInt(this.courseId) + 1;
}
}
}
};
</script>
```
在这个组件中,`courseName` 用于绑定课程名称的输入框,`courseId` 则用于展示自动生成的课程编号,并且是只读的。
在组件创建时,我们从 localStorage 中获取最后一个门课程编号,如果没有课程则从2023001开始。然后通过 `watch` 监听 `courseName` 的变化,如果课程名称不为空,则更新课程编号,同时将最后一个门课程编号保存到 localStorage 中,以便下次使用。
请注意,这只是一个简单的示例代码,实际应用中还需要考虑更多的场景和细节。