3018540
/
vuejs_seminar_2025
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update solution

4_eingabemaske
Ann-Kathrin Stracke 2025-01-28 08:55:29 +01:00
parent 155a96a468
commit 27a1b866a4
2 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
vue-project/src/App.vue
View File

@ -1,26 +1,51 @@
<script setup> <script setup>
import {ref} from "vue"; import { ref } from "vue";
import InputMask from "@/components/InputMask.vue";
const name = ref('')
setTimeout(() => {
name.value = 'Bob'
}, 1000)
const name = 'your-name'
const textClass = 'text'
const counter = ref(0) const counter = ref(0)
function incrementCounter() { function incrementCounter() {
counter.value++ counter.value++
} }
const grade_form_input = ref({
kuerzel: "",
note: 1.0,
credits: 5
})
</script> </script>
<template> <template>
<h1 :class="textClass">Hello {{ name }}</h1> <h1>Hello {{ name }}</h1>
<button @click="incrementCounter">click me for cookies</button> <button @click="incrementCounter">click me for cookies</button>
You have {{ counter }} cookies You have {{ counter }} cookies
<InputMask/>
<div class="input-mask">
<form>
<label>
Modulkürzel
<input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
</label>
<label>
Note
<input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
</label>
<label>
Credits
<input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
</label>
<button type="submit">Note Eintragen</button>
</form>
{{ grade_form_input.kuerzel }}
{{ grade_form_input.note }}
{{ grade_form_input.credits }}
</div>
</template> </template>
<style scoped> <style scoped></style>
.text {
color: red;
}
</style>

36
vue-project/src/components/InputMask.vue
View File

@ -1,36 +0,0 @@
<template>
<div class="input-mask">
<span>Ich bin InputMask.vue</span>
<form>
<label>
Modulkürzel
<input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
</label>
<label>
Note
<input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
</label>
<label>
Credits
<input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
</label>
<button type="submit">Note Eintragen</button>
</form>
<!-- @deleteEntry="deleteGrade"-->
</div>
</template>
<script setup>
import {ref} from 'vue';
const grade_form_input = ref({
kuerzel: "",
note: 1.0,
credits: 5
})
</script>
<style scoped>
</style>