random-web-tools/src/views/StrToLowerUppper.vue

52 lines
1.2 KiB
Vue
Raw Normal View History

<template>
<h2 class="tool-title">Str to lower/upper</h2>
<hr class="mt-5 mb-5">
<div class="input-group">
<label for="data">Data</label>
2023-12-15 12:11:46 +02:00
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
<label>Mode</label>
<div>
<input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_lower">to lower</label><br>
<input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_upper">to upper</label>
</div>
</div>
<hr class="mt-5 mb-5">
<div class="input-group">
<label for="result">Result</label>
2023-12-15 12:11:46 +02:00
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
toolData: {
data: '',
caseMode: 'upper',
},
};
},
computed: {
toolResult() {
switch (this.toolData.caseMode) {
case 'lower':
return this.toolData.data.toLocaleLowerCase();
case 'upper':
return this.toolData.data.toLocaleUpperCase();
}
},
},
}
</script>
<style lang="scss">
</style>