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

add solution

4_eingabemaske
valerio 2025-01-25 11:25:16 +01:00
parent 9195535aad
commit f208ddd171
4 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
vue-project/assets/css/global.css 100644
View File

@ -0,0 +1,4 @@
body{
display: flex;
justify-content: center;
}

1
vue-project/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<link rel="stylesheet" href="assets/css/global.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

@ -1,5 +1,6 @@
<script setup> <script setup>
import {ref} from "vue"; import {ref} from "vue";
import InputMask from "@/components/InputMask.vue";
const name = 'your-name' const name = 'your-name'
const textClass = 'text' const textClass = 'text'
@ -15,6 +16,7 @@ function incrementCounter() {
<h1 :class="textClass">Hello {{ name }}</h1> <h1 :class="textClass">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/>
</template> </template>
<style scoped> <style scoped>

40
vue-project/src/components/InputMask.vue 100644
View File

@ -0,0 +1,40 @@
<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>
.input-mask {
background-color: aquamarine;
padding: 1em;
text-align: center;
}
</style>