Vue Js Change Input Color Based on Value

<html>

<body>

<div id="app">
        <div class="container">
            <h3>Vue Js Change Input Color Based On Value</h3>
            <div class="field-wrapper">
                <label class="field-label">Field Value</label>
                <input type="text" :class="fieldColorClass" :style="{ backgroundColor: fieldColorClass }"
                    v-model="fieldValue" class="field-input">
            </div>
            <p>Value 0-25 : red color</p>
            <p>Value 26-50 : Blue color</p>
            <p>Value 51-75 : Yellow color</p>
            <p>Value 76-100 : Green color</p>
        </div>
    </div>

.field-wrapper {
            position: relative;
        }

.field-label {
            position: absolute;
            top: -15px;
            left: 5px;
            font-size: 12px;
            color: #888888;
        }

.field-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #dddddd;
            border-radius: 4px;
            background-color: #ffffff;
        }

.red-color {
            color: #d50000;
            background-color: #ff5252;
            border-color: #b71c1c;
            
        }

.blue-color {
            color: #0d47a1;
            background-color: #64b5f6;
            border-color: #0d47a1;
        }

.yellow-color {
            color: #eea000;
            background-color: #ffee58;
            border-color: #eea000;
        }

.green-color {
            color: #1b5e20;
            background-color: #81c784;
            border-color: #1b5e20;
        }

.container p {
            margin: 5px 0;
            font-size: 10px;
            color: #b71c1c
        }
    </style>
</body>

</html>