スタイルを動的に変える
スタイルの動的変更
<style scoped>
.input-name{
/* 変数を割り当てられる */
background-color: v-bind(color);
}
</style>
<script setup lang="ts">
// 文字列の長さに応じてスタイルを変更
const nameLengthLimit = 15
const isValidName = computed(() => {
if (inputtingName.value.length >= nameLengthLimit) {
return false
} else {
return true
}
})
const color = computed(() => {
return isValidName.value ? "white" : "rgb(244, 194, 90)"
})
</script>
ボタンの無効化
ボタンの無効化
// buttonタグのdisabled属性で可能
// v-bindでTypeScriptの値を渡す
<template>
<div>
<button :disabled="!isValidName">register</button>
</div>
</template>
確認アラート
<script setup lang="ts">
// confirm関数
const onClickDelete = () => {
if (confirm("hoge")) {
// OKの場合の処理
}
}
</script>
参考