
1 changed files with 35 additions and 14 deletions
@ -1,28 +1,49 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
<div id="app"> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
|
<h1>Letenka</h1> |
||||
|
<div class="wrapper"></div> |
||||
|
<div class="col"> |
||||
|
<h2>Parametry letu</h2> |
||||
|
<select v-model="travelType" > |
||||
|
<option value="" disabled>Vyberte jednu požnost</option> |
||||
|
<option v-for="(option, index) in travelTypes" :key="index" :value="option"> |
||||
|
{{option.text}} |
||||
|
</option> |
||||
|
|
||||
|
</select> |
||||
|
</div> |
||||
|
<div class="col"> |
||||
|
<h2>Objednávka</h2> |
||||
|
<p v-if="travelType"> |
||||
|
Typ cesty: |
||||
|
<span style="text-transform:lowercase">{{travelType.text}} |
||||
|
</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
|
name: "App", |
||||
|
data: function(){ |
||||
|
return { |
||||
|
travelType: "", |
||||
|
travelTypes: [ |
||||
|
{ value: "R", text: "Zpáteční"}, |
||||
|
{ value: "O", text: "Jednosměrná"}, |
||||
|
] |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
#app { |
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
|
.wrapper { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
} |
} |
||||
</style> |
|
||||
|
</style> |
Loading…
Reference in new issue