screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Display an error message when input text character validation fails</h3> <input type="text" v-model="text" required/><br> <Pre :style="{ color: text.length>10 ? 'red' : 'initial' }"><span v-if="text.length > 10">{{ errorMessage }}.</span>Total text length {{text.length}}</Pre> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { text: '', errorMessage: 'Error: Length exceeded, max allowed 10' } }, }); </script> </body> </html>